javascript Angularjs - 我如何访问控制器中的指令属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24864956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs - how do i access directive attribute in controller
提问by Arun
I am new to angularjs and i am stuck in accessing directive attributes in controller.
我是 angularjs 的新手，我一直在访问控制器中的指令属性。
Directive
指示
<rating max-stars="5" url="url.json"></rating>
app.directive('rating', [function () {
return {
restrict: 'E',
scope: {
maxStars: '=',
url: '@'
},
link: function (scope, iElement, iAttrs) {
console.log(iAttrs.url); //works
}
controller
控制器
app.controller('ratingController', ['$scope', '$attrs' , '$http','$routeParams',function ($scope,$attrs,$http,$routeParams) {
console.log($attrs.url); //shows undefined
}]);
How do i access the url attribute in controller?
如何访问控制器中的 url 属性？
回答by gkalpak
If you want to associate a controller with a directive, you can use the Directive Definition Object's controllerproperty (either specifying the controller as a function or specifying the name of the controller (in which case it can be registered anywhere in your module)).
如果要将控制器与指令关联，可以使用指令定义对象的controller属性（将控制器指定为函数或指定控制器的名称（在这种情况下，它可以在模块中的任何位置注册））。
app.directive('rating', [function () {
return {
restrict: 'E',
scope: {
maxStars: '=',
url: '@'
},
controller: 'ratingController'
};
});
// Meanwhile, in some other file
app.controller('ratingController', function ($scope, $element, $attrs) {
// Access $attrs.url
// Better yet, since you have put those values on the scope,
// access them like this: $scope.url
...
});
When using two-way data-binding via =, the corresponding attribute's value should not be a literal (because you can't have two-way data-binding to a literal), but a string specifying the name of a property in the current scope.
使用双向数据绑定 via 时=，对应的属性值不应是文字（因为您不能将双向数据绑定到文字），而是指定当前范围内属性名称的字符串.
Using <rating max-stars="5"...together with scope: {maxStars: '='...is wrong.
You hould either use <rating max-stars="5"...and scope: {maxStars: '@'...
or <rating max-stars="someProp"...and scope: {maxStars: '='...while the enclosing scope has a property named somePropwith a numeric value (e.g. $scope.someProp = 5;).
使用<rating max-stars="5"...连同scope: {maxStars: '='...是错误的。
您应该使用<rating max-stars="5"...andscope: {maxStars: '@'...
或<rating max-stars="someProp"...andscope: {maxStars: '='...而封闭范围具有以someProp数字值命名的属性（例如$scope.someProp = 5;）。
回答by Wottensprels
app.directive('myDirective',function(){
return{
controller: function($scope,$attrs){
console.dir($attrs);
}
}
});
That's it. If you want to access the elements attributes on a controller, you have to set up a controller for the directive.
而已。如果要访问控制器上的元素属性，则必须为指令设置控制器。
(You could however, use a shared service to make those attributes available to another controller, if that's want you want to achieve)
（但是，如果您想要实现，您可以使用共享服务将这些属性提供给另一个控制器）
回答by Kasper Lewau
http://jsbin.com/xapawoka/1/edit
http://jsbin.com/xapawoka/1/edit
Took your code and made a jsBin out of it. I can't see any problems whatsoever, so I'm assuming this is a simple typo somewhere in your code (could be the stray [bracket at the top of your directive definition).
拿走你的代码并用它制作了一个 jsBin。我看不出任何问题，所以我假设这是您代码中某处的一个简单的错字（可能是[指令定义顶部的杂散括号）。
Here's the code:
这是代码：
var app = angular.module('app', []);
app.controller('ratingController',
function ($scope, $element, $attrs) {
console.log('ctrl.scope', $scope.url);
console.log('ctrl.attrs', $attrs.url);
});
app.directive('rating', function () {
return {
restrict: 'E',
scope: {
maxStars: '=',
url: '@'
},
controller: 'ratingController',
link: function (scope, el, attrs) {
console.log('dir.scope', scope.url);
console.log('dir.attrs', attrs.url);
}
};
});
And here's the output:
这是输出：
回答by user2422960
ratingControlleris not asociated with your directive. Thus, there is no element which can hold attributes bound to that controller.
ratingController与您的指令无关。因此，没有元素可以保存绑定到该控制器的属性。
If you need to access those attributes, the linkfunction is what you need (as you already mentioned above)
如果您需要访问这些属性，则该link功能就是您所需要的（正如您上面已经提到的）
What exactly do you want to achieve?
你究竟想达到什么目的？
