Làm thế nào để bạn truy cập một mục ng-lặp lại trong phạm vi của chỉ thị?

Question

Làm thế nào để bạn thiết lập giá trị phạm vi cho một cái gì đó như thế này:

<div ng-controller="MyCtrl"> 
     <my-element ng-repeat="p in people" person='p'></my-element> 
</div> 

var myApp = angular.module('myApp',[]); 

myApp.directive('myElement', function(){ 
    return { 
     restrict: 'E', 
     template: '<div>{{ name }}</div> <div>{{ age }}</div>' 
    } 
}); 

function MyCtrl($scope) { 
    $scope.people = [{ name: 'Mike', age: 20 },{name: 'Peter', age: 22 }]; 
} 

Answer 1

Nếu bởi "thiết lập giá trị phạm vi" bạn có nghĩa là có mẫu công việc, sau đó

template: '<div>{{ p.name }}</div> <div>{{ p.age }}</div>' 

Vì mỗi lần lặp của ng-repeat tạo ra một phạm vi con mới, p được định nghĩa trên phạm vi đó. Kể từ khi chỉ thị của bạn không tạo ra một phạm vi cô lập, bạn không cần thuộc tính person, vì vậy công trình này với ở trên:

<my-element ng-repeat="p in people"></my-element> 

Nếu bạn muốn một phạm vi cô lập, sử dụng

<my-element ng-repeat="p in people" person='p'></my-element> 

và

return { 
    restrict: 'E', 
    scope: { 
     person: '=' 
    }, 
    template: '<div>{{ person.name }}</div> <div>{{ person.age }}</div>' 
} 

Answer 2

Tôi thích sử dụng '@' khi xác định phạm vi chỉ thị. Điều này cho phép các chỉ thị được phân lập phạm vi tiếp cận p, ví dụ như trong link:

return { 
    scope: '@', 
    link: function(scope) { 
     console.log(scope.p); //It can now be accessed because of '@' 
    } 
} 

Answer 3

bạn không cần phải tạo ra một phạm vi cô lập trong chỉ thị. ng lặp lại sẽ tự động thực hiện việc này cho bạn. vì vậy chỉ cần loại bỏ:

trong chỉ thị:

scope: { 
    person: '=' 
}, 

và trong đánh dấu ng lặp lại html:

person='p' 

trong Chỉ thị của bạn, bạn sẽ có thể truy cập vào một cái gì đó giống như

$scope.p.personAttribute 

như đã đề cập trong phần giải thích tại đây: angularjs-pass-instance-of-each-ng-repeat-in-html-to-directive