Javascript AngularJS：将 $scope 变量作为指令属性传递
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28425711/
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 : Pass $scope variable as directive attribute
提问by iJade
I'm trying to pass the $scope variable values to a custom directive as attribute, but it's not working.
我试图将 $scope 变量值作为属性传递给自定义指令，但它不起作用。
Here is the HTML code:
这是 HTML 代码：
<ul ng-repeat="q in questions">
<li>
{{q.question}}
<check-list name="{{q.id}}"></check-list>
</li>
</ul>
The directive is <check-list name={{q.id}}></check-list>, and here is the directive code :
指令是<check-list name={{q.id}}></check-list>，这里是指令代码：
app.directive('checkList',function(){
return {
restrict:'E',
template: function(elem,attrs){
console.log(attrs.name);
return '</br> <input type="radio" /> Yes </br> <input type="radio" /> No'
},
link:function(scope,elem,attrs){
}
};
})
I'm logging the attribute attrs.namebut the value I'm getting is "{{q.id}}"instead of the actual value of q.id
我正在记录属性，attrs.name但我得到的值"{{q.id}}"不是实际值q.id
回答by Rebornix
I suppose what you want to do is injecting scope object from controller to your directive. So you can define your directive as
我想你想要做的是将范围对象从控制器注入到你的指令中。所以你可以将你的指令定义为
app.directive('checkList',function(){
return {
restrict:'E',
scope: {
name: "="
}
template: '{{name}}</br> <input type="radio" /> Yes </br> <input type="radio" /> No',
link:function(scope,elem,attrs){
}
};
}
And in your view, you can reference your directive as
在您看来，您可以将您的指令引用为
<check-list name="q.id"></check-list>
回答by Joe Enzminger
In directives, attributes are just strings.
在指令中，属性只是字符串。
In a template function, all you can do is use the string value of the attribute. If you want to use the evaluated or interpolated value of the attribute, you have a few options:
在模板函数中，您所能做的就是使用属性的字符串值。如果要使用属性的评估值或插值值，您有几个选项：
1) Use an isolated scope
1) 使用隔离范围
app.directive('checkList', function() {
return {
restrict:'E',
scope: {
name: '&'
}
template: '</br> <input type="radio" /> Yes </br>{{name()}} <input type="radio" /> No'
link: function(scope, elem, attrs) {
}
};
});
<ul ng-repeat="q in questions">
<li>
{{q.question}}
<check-list name="q.id"></check-list>
</li>
</ul>
2) Inject $interpolate or $parse to evaluate the interpolation or expression manually in the link function
2) 在链接函数中手动注入$interpolate 或$parse 来计算插值或表达式
app.directive('checkList', function($interpolate) {
return {
restrict:'E',
template: '</br> <input type="radio" /> Yes </br>{{name}} <input type="radio" /> No'
link:function(scope,elem,attrs){
scope.name = $interpolate(attrs.name)(scope);
}
};
});
<ul ng-repeat="q in questions">
<li>
{{q.question}}
<check-list name="{{q.id}}"></check-list>
</li>
</ul>
2a) And finally, $parse
2a) 最后，$parse
app.directive('checkList',function($parse){
return {
restrict:'E',
template: '</br> <input type="radio" /> Yes </br>{{name}} <input type="radio" /> No'
link:function(scope,elem,attrs){
scope.name = $parse(attrs.name)(scope);
}
};
});
<ul ng-repeat="q in questions">
<li>
{{q.question}}
<check-list name="q.id"></check-list>
</li>
</ul>
回答by MaheshMG
I think you need to pass "q.id" instead of name={{q.id}} provided $scope.q.id is defined in your corresponding controller.
我认为您需要传递“q.id”而不是 name={{q.id}} ，前提是 $scope.q.id 在您的相应控制器中定义。
<check-list name="q.id"></check-list>
回答by roland
Or pass the entire scope to your directive:
或者将整个范围传递给您的指令：
app.directive('checkList',function(){
return {
restrict:'E',
scope: true, //scope
template: function(elem,attrs){
console.log(attrs.name);
return '</br> <input type="radio" /> Yes </br> <input type="radio" /> No'
},
link:function(scope,elem,attrs){
var question = scope.q; //get your question here
}
};
})
I recommend you pass only reference type as argument to your directive. Do not pass primitive types (q.idmay be an integer). Pass questioninstead. It's all about how angularjs utilizes prototypical inheritance.
我建议您仅将引用类型作为参数传递给您的指令。不要传递原始类型（q.id可能是整数）。question而是通过。这完全是关于 angularjs 如何利用原型继承。
Scopeis a complex topic in angularjs. See this: https://github.com/angular/angular.js/wiki/Understanding-Scopes
Scope在 angularjs 中是一个复杂的话题。看到这个：https: //github.com/angular/angular.js/wiki/Understanding-Scopes
