Question

Super Angular新秀在这里。

有一个自定义指令来创建一个将属性值写入span的元素：

myApp.directive("myDirective", function(){
    return {
        restrict : "E",
        template : "<span>{{ dirCtrl.dirText }}</span>",
        controller : function($attrs){
            this.dirText = $attrs.dirText;
        },  
        controllerAs : "dirCtrl"
    };
});

如果写一个

来测试它

<my-directive dir-text="Test 1 2 3"></my-directive>

按预期输出Test 1 2 3，但如果我使用多次

<my-directive dir-text="Test 1 2 3"></my-directive><br>
<my-directive dir-text="Test 4 5 6"></my-directive>

输出

Test 4 5 6
Test 4 5 6

但我希望它是

Test 1 2 3
Test 4 5 6

那么，我做错了什么？

FIDDLE

Answer 1

您需要在指令中使用scope:true,（创建子范围）或scope:{},（创建隔离范围）选项，否则指令实例使用相同的范围并设置dirCtrl.dirText也在同一范围内，因此最后一个覆盖任何其他先前的实例设置值。使用childscope或隔离范围为该指令本身创建一个范围，在您的情况下也更合适。 每当你在一个指令的范围内设置一个属性时，总是建议为指令创建一个范围（除非这是真的意图），因为通常你不想污染指令所在的当前范围。英寸

.directive("myDirective", function(){
    return {
        restrict : "E",
        scope:true,
        template : "<span>{{ dirCtrl.dirText }}</span>",
        controller : function($attrs){
            this.dirText = $attrs.dirText;
        },
        controllerAs : "dirCtrl"
    };
});

<强> Fiddle

Angular - 如何在自定义指令中使用属性的值？

1 个答案: