Come si accede a un elemento ng-repeat nell'ambito di una direttiva?

Question

Come si imposta il valore di spazio per qualcosa di simile:

<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

Se per "impostare il valore ambito" Vuol dire avere il lavoro modello, quindi

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

Poiché ogni iterazione di ng-repeat crea un nuovo ambito figlio, p è definito su tale ambito. Dal momento che il direttiva non è la creazione di un ambito isolato, non è necessario attribuire person, quindi questo funziona con quanto sopra:

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

Se si desidera un ambito isolato, utilizzare

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

e

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

Answer 2

Mi piace utilizzare '@' quando si definisce lo scopo della direttiva. In questo modo la direttiva isolato campo di applicazione per accedere p, ad esempio nel link:

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

Answer 3

non è necessario creare un ambito isolato nella direttiva. ng repeat lo farà automaticamente per te. quindi basta rimuovere:

nella direttiva:

scope: { 
    person: '=' 
}, 

e nella marcatura ng ripetizione html:

person='p' 

nella vostra direttiva si sarà in grado di accedere a qualcosa di simile

$scope.p.personAttribute 

come menzionato nella spiegazione qui: angularjs-pass-instance-of-each-ng-repeat-in-html-to-directive