Как вы получаете доступ к элементу ng-repeat в области действия директивы?

Как установить значение области для чего-то вроде этого:

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

Ответ 1

Если по значению "установить значение области" вы имеете в виду работу шаблона, то

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

Поскольку каждая итерация ng-repeat создает новую дочернюю область, в этой области определяется p. Поскольку ваша директива не создает область выделения, вам не нужен атрибут person, поэтому это работает с вышесказанным:

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

Если вы хотите выделить область выделения, используйте

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

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

Ответ 2

вам не нужно создавать изолированную область действия в директиве. ng repeat сделает это автоматически для вас. поэтому просто удалите:

в директиве:

scope: {
   person: '='
},

и в разметке ng repeat html:

person='p'

в вашей директиве вы сможете получить доступ к чему-то вроде

$scope.p.personAttribute

как указано в объяснении здесь: angularjs-pass-instance-of-each-ng-repeat-in-html-to-directive

Ответ 3

Мне нравится использовать '@' при определении области действия директивы. Это позволяет директивной изолированной области доступа к p, например, в ссылке:

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