Wie greifen Sie auf ein ng-repeat-Element im Geltungsbereich einer Direktive zu?

Question

Wie beurteilen Sie den Bereichswert für so etwas ein:

<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

Wenn durch „den Umfang Wert“ Sie haben meine die Vorlage arbeiten, dann

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

Da jeder Iteration von ng-repeat erstellt einen neuen untergeordneten Bereich, ist in diesem Bereich definiert. Da Ihre Richtlinie ist ein Isolat Umfang nicht zu schaffen, brauchen Sie nicht person Attribut, so funktioniert dies mit der oben:

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

Wenn Sie ein Isolat Rahmen möchten, verwenden Sie

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

und

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

Answer 2

Ich mag verwenden ‚@‘, wenn die Richtlinie Umfang definieren. Dies ermöglicht es, die Richtlinie isoliert Umfang p zuzugreifen, zum Beispiel in Verbindung:

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

Answer 3

Sie brauchen nicht eine isolierte Anwendungsbereich der Richtlinie zu erstellen. ng wiederholen wird dies automatisch für Sie tun. so entfernen Sie einfach:

in der Richtlinie:

scope: { 
    person: '=' 
}, 

und im ng wiederholen HTML-Markup:

person='p' 

in Ihrer Richtlinie können Sie etwas zugreifen wie

$scope.p.personAttribute 

wie in der Erklärung hier erwähnt: angularjs-pass-instance-of-each-ng-repeat-in-html-to-directive