AngularJS: Biến $ scope variable thành thuộc tính chỉ thị

Question

Tôi đang cố gắng chuyển giá trị biến $ scope đến một chỉ thị tùy chỉnh dưới dạng thuộc tính, nhưng nó không hoạt động.

Đây là mã HTML:

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

Chỉ thị là <check-list name={{q.id}}></check-list>, và đây là mã chỉ thị:

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){ 

     } 
    }; 
}) 

tôi đăng nhập thuộc tính attrs.name nhưng giá trị tôi nhận được là "{{q.id}}" thay vì giá trị thực tế của q.id

Answer 1

Tôi cho rằng điều bạn muốn làm là tiêm đối tượng phạm vi từ bộ điều khiển vào chỉ thị của bạn. Vì vậy, bạn có thể xác định chỉ thị của bạn như

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){ 

     } 
    }; 
} 

Và theo quan điểm của bạn, bạn có thể tham khảo chỉ thị của bạn như

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

Answer 2

Tôi nghĩ bạn cần chuyển "q.id" thay vì name = {{q.id} } cung cấp $ scope.q.id được định nghĩa trong bộ điều khiển tương ứng của bạn.

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

Answer 3

Hoặc vượt qua toàn bộ phạm vi để chỉ thị của bạn:

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 
     } 
    }; 
}) 

Tôi khuyên bạn nên bạn chỉ chuyển kiểu tham chiếu làm đối số cho chỉ thị của bạn. Không vượt qua các loại nguyên thủy (q.id có thể là số nguyên). Thay vào đó, hãy chuyển question. Đó là tất cả về cách angularjs sử dụng thừa kế nguyên mẫu.

Scope là một chủ đề phức tạp trong angularjs. Xem phần này: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 4

Trong chỉ thị, thuộc tính chỉ là chuỗi.

Trong chức năng mẫu, tất cả những gì bạn có thể làm là sử dụng giá trị chuỗi của thuộc tính. Nếu bạn muốn sử dụng giá trị đánh giá hoặc nội suy của thuộc tính, bạn có một vài lựa chọn:

1) Sử dụng một phạm vi cô lập

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) Tiêm $ suy hoặc $ phân tích để đánh giá suy hoặc biểu hiện bằng tay trong liên kết chức năng

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) Và cuối cùng, $ phân tích

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>