我正在尝试使用指令创建并向<div>
添加多个标记,如下所示:
module.directive('createControl', function(){
return function(scope, element, attrs){
console.log(attrs.createControl); // undefined
}
});
<div class="control-group" ng-repeat="(k, v) in selectedControls">
<div create-control="{{ v.type }}"></div>
</div>
在attrs中我有这种结构:
$$element: b.fn.b.init[1]
$$observers: Object
$attr: Object
createControl: "date"
style: "margin-right: 15px"
__proto__: Object
但是当我尝试使用attrs.createControl
时,我得到了undefined
,我不明白为什么。实际问题:如何将范围变量传递给指令?
答案 0 :(得分:34)
app.directive('createControl', function() {
return {
scope: {
createControl:'='
},
link: function(scope, element, attrs){
element.text(scope.createControl);
}
}
})
<div class="control-group" ng-repeat="v in [{type:'green'}, {type:'brown'}]">
<div create-control="v.type"></div>
</div>
答案 1 :(得分:15)
阅读directive docs的属性/观察插值属性部分。在链接阶段,尚未设置属性。
有多种方法可以使用attrs.$observe
或$timeout
。
app.directive('createControl', function($timeout){
return function(scope, element, attrs){
attrs.$observe('createControl',function(){
console.log(' type:',attrs.createControl);
element.text('Directive text, type is: '+attrs.createControl);
});
}
}) ;
答案 2 :(得分:15)
如果v.type
可能会发生变化(即,您确实需要使用插值 - {{}} s),请使用@ charlietfl或@ Joe的答案,具体取决于您希望指令具有的范围类型
如果v.type
不会改变(即,您的链接函数只需要获取一次值,并且保证在链接函数运行时设置这些值),则可以使用$parse或而是$eval。这有一个轻微的性能优势,因为没有创建$ watch。 (使用$observe()
和=
,Angular会设置$ watch,每个摘要周期都会对其进行评估。)
<div create-control="v.type"></div>
app.directive('createControl', function ($parse) {
return function (scope, element, attrs) {
console.log('$eval type:', scope.$eval(attrs.createControl));
var type = $parse(attrs.createControl)(scope);
console.log('$parse type:', type);
element.text('Directive text, type is: ' + type);
}
});