以下是描述问题的最小代码。在页面上,我有:
<div ng-controller='AController as a'>
<div a-directive></div>
</div>
在js中,我有:
app.directive("aDirective", function($compile){
return {
scope: true,
link: function(scope, element, attrs) {
var template = "<h1>{{a.label}}</h1>";
element.append($compile(template)(scope));
}
}
});
app.controller("AController", function($scope){
self = this;
self.label = "some text";
});
这是有效的,但问题是{{a.label}},它使视图和控制器/模型紧密耦合。有没有办法摆脱那个。,更不用说指令代码中的controllerAs-name了? (就像我在控制器代码中所做的那样)
答案 0 :(得分:1)
要改进此功能,您可以传递文本作为指令的参数显示。这样的事情是最初的想法:
<div a-directive="a.label"></div>
但是,我建议使用控制器的别名,所以我制作了一个Plunker,你可以看到所有这些都有一些改进。
请在此处查看:http://plnkr.co/edit/1hBSBxwSEPXoj9TULzRQ?p=preview
我还建议使用template
代替link
并将指令限制为元素而不是将其用作属性,因为它正在修改DOM。但是,是的,你可以继续改进它直到时代的结束:)