How do you access an ng-repeat item in a directive's scope?

Question

How do you set the scope value for something like this:

<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

If by "set the scope value" you mean have the template work, then

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

Since each iteration of ng-repeat creates a new child scope, p is defined on that scope. Since your directive is not creating an isolate scope, you don't need attribute person, so this works with the above:

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

If you want an isolate scope, use

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

and

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

Answer 2

I like to use '@' when defining the directive scope. This enables the directive isolated scope to access p, for example in link:

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