AngularJS：將$ scope變量作爲指令屬性

Question

我試圖將$ scope變量值作爲屬性傳遞給自定義指令，但它不起作用。

下面是HTML代碼：

<ul ng-repeat="q in questions"> 
     <li> 
      {{q.question}} 
      <check-list name="{{q.id}}"></check-list> 
     </li> 
</ul> 

該指令是<check-list name={{q.id}}></check-list>，這裏是指令代碼：

app.directive('checkList',function(){ 
    return { 
     restrict:'E', 
     template: function(elem,attrs){ 
      console.log(attrs.name); 
      return '</br> <input type="radio" /> Yes </br> <input type="radio" /> No' 
     }, 
     link:function(scope,elem,attrs){ 

     } 
    }; 
}) 

我登錄屬性attrs.name但我得到的價值是"{{q.id}}"而不是實際值q.id

Answer 1

我想你想要做的是從控制器注入範圍對象到你的指令。所以，你可以定義你的指令，因爲

app.directive('checkList',function(){ 
    return { 
     restrict:'E', 
     scope: { 
      name: "=" 
     } 
     template: '{{name}}</br> <input type="radio" /> Yes </br> <input type="radio" /> No', 
     link:function(scope,elem,attrs){ 

     } 
    }; 
} 

而且在你看來，你可以參考你的指令，因爲

<check-list name="q.id"></check-list> 

Answer 2

我想你需要通過「q.id」而不是name = {{q.id} }提供$ scope.q.id是在您的相應控制器中定義的。

<check-list name="q.id"></check-list> 

Answer 3

或整個範圍傳遞給你的指令：

app.directive('checkList',function(){ 
    return { 
     restrict:'E', 
     scope: true, //scope 
     template: function(elem,attrs){ 
      console.log(attrs.name); 
      return '</br> <input type="radio" /> Yes </br> <input type="radio" /> No' 
     }, 
     link:function(scope,elem,attrs){ 
      var question = scope.q; //get your question here 
     } 
    }; 
}) 

我建議您只將參考類型作爲參數傳遞給您的指令。不要傳遞原始類型（q.id可能是一個整數）。改爲通過question。這完全是關於angularjs如何利用原型繼承。

Scope是angularjs中的一個複雜主題。看到這個：https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 4

在指令中，屬性只是字符串。

在模板函數中，您所能做的就是使用屬性的字符串值。如果你想使用屬性的評估或插入值，你有幾種選擇：

1）使用一個孤立的範圍

app.directive('checkList', function() { 
    return { 
     restrict:'E', 
     scope: { 
      name: '&' 
     } 
     template: '</br> <input type="radio" /> Yes </br>{{name()}} <input type="radio" /> No' 
     link: function(scope, elem, attrs) { 

     } 
    }; 
}); 

<ul ng-repeat="q in questions"> 
     <li> 
      {{q.question}} 
      <check-list name="q.id"></check-list> 
     </li> 
</ul> 

2）注入$插值或$分析評估插值或在鏈接功能

app.directive('checkList', function($interpolate) { 
    return { 
     restrict:'E', 
     template: '</br> <input type="radio" /> Yes </br>{{name}} <input type="radio" /> No' 
     link:function(scope,elem,attrs){ 
      scope.name = $interpolate(attrs.name)(scope); 
     } 
    }; 
}); 

<ul ng-repeat="q in questions"> 
     <li> 
      {{q.question}} 
      <check-list name="{{q.id}}"></check-list> 
     </li> 
</ul> 

2A手動表達）最後，$解析

app.directive('checkList',function($parse){ 
    return { 
     restrict:'E', 
     template: '</br> <input type="radio" /> Yes </br>{{name}} <input type="radio" /> No' 
     link:function(scope,elem,attrs){ 
      scope.name = $parse(attrs.name)(scope); 
     } 
    }; 
}); 

<ul ng-repeat="q in questions"> 
     <li> 
      {{q.question}} 
      <check-list name="q.id"></check-list> 
     </li> 
</ul>