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

iLe*_*ing 22 angularjs angularjs-directive

如何为这样的事情设置范围值:

<div ng-controller="MyCtrl">
      <my-element ng-repeat="p in people" person='p'></my-element>
</div>
Run Code Online (Sandbox Code Playgroud)
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 }];
}
Run Code Online (Sandbox Code Playgroud)

Mar*_*cok 26

如果通过"设置范围值"表示模板有效,那么

template: '<div>{{ p.name }}</div> <div>{{ p.age }}</div>'
Run Code Online (Sandbox Code Playgroud)

由于ng-repeat的每次迭代都会创建一个新的子范围,p因此在该范围内定义.由于您的指令不是创建隔离范围,因此您不需要属性person,因此这适用于以上内容:

<my-element ng-repeat="p in people"></my-element>
Run Code Online (Sandbox Code Playgroud)

如果您需要隔离范围,请使用

<my-element ng-repeat="p in people" person='p'></my-element>
Run Code Online (Sandbox Code Playgroud)

return {
   restrict: 'E',
   scope: {
       person: '='
   },
   template: '<div>{{ person.name }}</div> <div>{{ person.age }}</div>'
}
Run Code Online (Sandbox Code Playgroud)