我有一个控制器负责与API通信，以更新用户的属性，名称，电子邮件等。每个用户都有一个“id”，当查看配置文件页面时，这个“id”从服务器传递过来。
我想把这个值传递给AngularJS控制器，这样它就知道当前用户的API入口点是什么。我试着在ng-controller中传递这个值。例如:
function UserCtrl(id, $scope, $filter) {
$scope.connection = $resource('api.com/user/' + id)
在HTML中
<body ng-controller="UserCtrl({% id %})">
其中{% id %}打印从服务器发送的id。但是会有错误。
在创建控制器时将值传递给控制器的正确方法是什么?
当前回答
我发现从$routeProvider传递变量很有用。
例如，你在多个屏幕上使用一个控制器MyController，在里面传递一些非常重要的变量“mySuperConstant”。
使用这个简单的结构:
Router:
$routeProvider
.when('/this-page', {
templateUrl: 'common.html',
controller: MyController,
mySuperConstant: "123"
})
.when('/that-page', {
templateUrl: 'common.html',
controller: MyController,
mySuperConstant: "456"
})
.when('/another-page', {
templateUrl: 'common.html',
controller: MyController,
mySuperConstant: "789"
})
MyController:
MyController: function ($scope, $route) {
var mySuperConstant: $route.current.mySuperConstant;
alert(mySuperConstant);
}
其他回答
这也是可行的。
Javascript:
var app = angular.module('angularApp', []);
app.controller('MainCtrl', function($scope, name, id) {
$scope.id = id;
$scope.name = name;
// and more init
});
Html:
<!DOCTYPE html>
<html ng-app="angularApp">
<head lang="en">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
<script>
app.value("name", "James").value("id", "007");
</script>
</head>
<body ng-controller="MainCtrl">
<h1>I am {{name}} {{id}}</h1>
</body>
</html>
这里有一个解决方案(基于Marcin Wyszynski的建议)，当你想要传递一个值到你的控制器，但你没有显式地在你的html中声明控制器(ng-init似乎需要)-例如，如果你用ng-view渲染你的模板，并通过routeProvider为相应的路由声明每个控制器。
JS
messageboard.directive('currentuser', ['CurrentUser', function(CurrentUser) {
return function(scope, element, attrs) {
CurrentUser.name = attrs.name;
};
}]);
html
<div ng-app="app">
<div class="view-container">
<div ng-view currentuser name="testusername" class="view-frame animate-view"></div>
</div>
</div>
在这个解决方案中，CurrentUser是一个服务，它可以被注入到任何控制器中，此时.name属性可用。
两个笔记:
a problem I've encountered is that .name gets set after the controller loads, so as a workaround I have a short timeout before rendering username on the controller's scope. Is there a neat way of waiting until .name has been set on the service? this feels like a very easy way to get a current user into your Angular App with all the authentication kept outside Angular. You could have a before_filter to prevent non-logged in users getting to the html where your Angular app is bootstrapped in, and within that html you could just interpolate the logged in user's name and even their ID if you wanted to interact with the user's details via http requests from your Angular app. You could allow non-logged in users to use the Angular App with a default 'guest user'. Any advice on why this approach would be bad would be welcome - it feels too easy to be sensible!)
This is an expansion of @Michael Tiller's excellent answer. His answer works for initializing variables from the view by injecting the $attrs object into the controller. The problem occurs if the same controller is called from $routeProvider when you navigate by routing. Then you get injector error Unknown provider : $attrsProvider because $attrs is only available for injection when the view is compiled. The solution is to pass the variable (foo) through $routeParams when initializing controller from route and by $attrs when initializing controller from view. Here's my solution.
从路线
$routeProvider.
when('/mypage/:foo', {
templateUrl: 'templates/mypage.html',
controller: 'MyPageController',
caseInsensitiveMatch: true,
resolve: {
$attrs: function () {
return {};
}
}
});
它处理一个url，如'/mypage/bar'。正如你所看到的，foo是通过url param传递的，我们为$attrs提供了一个空白对象，因此注入器没有错误。
从视图
<div ng-controller="MyPageController" data-foo="bar">
</div>
现在是控制器
var app = angular.module('myapp', []);
app.controller('MyPageController',['$scope', '$attrs', '$routeParams'], function($scope, $attrs, $routeParams) {
//now you can initialize foo. If $attrs contains foo, it's been initialized from view
//else find it from $routeParams
var foo = $attrs.foo? $attrs.foo : $routeParams.foo;
console.log(foo); //prints 'bar'
});
不，不可能。我认为你可以使用ng-init作为hack http://docs.angularjs.org/api/ng.directive:ngInit。
对于我的特定用例，我真的不喜欢这里的任何解决方案，所以我想我应该发布我所做的，因为我在这里没有看到它。
我只是想在ng-repeat循环中使用一个更像指令的控制器:
<div ng-repeat="objParameter in [{id:'a'},{id:'b'},{id:'c'}]">
<div ng-controller="DirectiveLikeController as ctrl"></div>
</div>
现在，为了在每个DirectiveLikeController中创建时访问objParameter(或在任何时候获得最新的objParameter)，我所需要做的就是注入$scope并调用$scope.$eval('objParameter'):
var app = angular.module('myapp', []);
app.controller('DirectiveLikeController',['$scope'], function($scope) {
//print 'a' for the 1st instance, 'b' for the 2nd instance, and 'c' for the 3rd.
console.log($scope.$eval('objParameter').id);
});
我看到的唯一缺点是它要求父控制器知道参数名为objParameter。
