我有一个控制器负责与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。但是会有错误。
在创建控制器时将值传递给控制器的正确方法是什么?
当前回答
你可以在设置路由时这样做。
.when('/newitem/:itemType', {
templateUrl: 'scripts/components/items/newEditItem.html',
controller: 'NewEditItemController as vm',
resolve: {
isEditMode: function () {
return true;
}
},
})
以后用它作为
(function () {
'use strict';
angular
.module('myApp')
.controller('NewEditItemController', NewEditItemController);
NewEditItemController.$inject = ['$http','isEditMode',$routeParams,];
function NewEditItemController($http, isEditMode, $routeParams) {
/* jshint validthis:true */
var vm = this;
vm.isEditMode = isEditMode;
vm.itemType = $routeParams.itemType;
}
})();
所以在这里，当我们设置路由时，我们发送:itemType并稍后从$routeParams中检索它。
其他回答
我对此很晚了，我不知道这是否是一个好主意，但你可以在控制器函数中包括$attrs注入，允许控制器使用元素上提供的“参数”进行初始化，例如。
app.controller('modelController', function($scope, $attrs) {
if (!$attrs.model) throw new Error("No model for modelController");
// Initialize $scope using the value of the model attribute, e.g.,
$scope.url = "http://example.com/fetch?model="+$attrs.model;
})
<div ng-controller="modelController" model="foobar">
<a href="{{url}}">Click here</a>
</div>
同样，不知道这是否是一个好主意，但它似乎有效，是另一种选择。
就像@akonsu和Nigel Findlater建议的那样，你可以用$routeParams读取url, url是index.html#/user/:id。Id并在控制器中使用它。
你的应用程序:
var app = angular.module('myApp', [ 'ngResource' ]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/:type/:id', {templateUrl: 'myView.html', controller: 'myCtrl'});
}]);
资源服务
app.factory('MyElements', ['$resource', function($resource) {
return $resource('url/to/json/:type/:id', { type:'@type', id:'@id' });
}]);
控制器
app.controller('MyCtrl', ['$scope', '$routeParams', 'MyElements', function($scope, $routeParams, MyElements) {
MyElements.get({'type': $routeParams.type, "id": $routeParams.id }, function(elm) {
$scope.elm = elm;
})
}]);
然后，根据id在视图中可以访问elm。
如果ng-init不是用来将对象传递到$scope，你可以编写自己的指令。这就是我得到的结果:
http://jsfiddle.net/goliney/89bLj/
Javasript：
var app = angular.module('myApp', []);
app.directive('initData', function($parse) {
return function(scope, element, attrs) {
//modify scope
var model = $parse(attrs.initData);
model(scope);
};
});
function Ctrl1($scope) {
//should be defined
$scope.inputdata = {foo:"east", bar:"west"};
}
Html:
<div ng-controller="Ctrl1">
<div init-data="inputdata.foo=123; inputdata.bar=321"></div>
</div>
但是我的方法只能修改已经在控制器中定义的对象。
这也是可行的。
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>
我发现从$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);
}
