AngularJS指令範圍沒有解決（ 「ATTR名沒有定義」 的錯誤）

Question

指令代碼

mymodule.directive('eicon', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      attr: '=' 
     }, 
     template: "test " + attr.name 
    } 
}); 

的Html

<tr ng-repeat="e in entities"> 
    <td><eicon attr="e"></eicon></td> 
</tr> 

我有此錯誤：ReferenceError: attr is not defined。怎麼了？

Answer 1

attr是在範圍訪問，這樣你就可以訪問scope.attr在您的控制器或鏈接階段，或{{attr}}在模板中。一個簡單的解決方案是將您的模板更改爲

mymodule.directive('eicon', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      attr: '=' 
     }, 
     template: "test {{attr.name}}", 
     link: function (scope, element, attrs) { 
      console.log(scope.attr); 
     }, 
     controller: function (scope) { 
      console.log(scope.attr); 
     } 
    } 
}); 

Answer 2

既然你宣佈獨立scope屬性attr你應該能夠訪問scope.attr模板是這樣的：

mymodule.directive('eicon', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      attr: '=' 
     }, 
     template: "test {{attr.name}}" 
    } 
}); 

演示：http://plnkr.co/edit/YZ0aPqhkMlIIwmrkKK2v?p=preview