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>