我试图用指令来创建并添加几个标签的<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 ，我不明白为什么。 实际的问题：如何范围变量传递给一个指令？
读取属性/观察插值属性的部分指令文档 。 在链接阶段的属性尚未设置。
有几种方法，包括使用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);
});
}
}) ;
DEMO
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>
如果v.type可能会改变（即，你真的需要使用插值- {在{}} S），使用@ charlietfl的或@乔的answser，取决于范围的类型，你希望你的指令有。
如果v.type不会改变（即你的链接功能，只需要获取值一次，这些值都保证设定，当你链接功能运行），您可以用$解析或$ EVAL代替。 这在不创建$手表轻微的性能优势。 （配$observe()和= ，角设置$手表，其中被评估的每个消化周期）。
<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);
}
});
演示
