angularjs - 如何访问指令范围内的 ng-repeat 项？

Question

如何设置类似这样的范围值:

<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

如果“设置范围值”是指让模板工作，那么

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>'
}