21

你如何设置这样的范围值:

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

3 回答 3

26

如果通过“设置范围值”您的意思是让模板工作,那么

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

由于 ng-repeat 的每次迭代都会创建一个新的子作用域,p因此是在该作用域上定义的。由于您的指令没有创建隔离范围,因此您不需要 attribute 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>'
}
于 2013-02-02T01:50:23.587 回答
3

我喜欢在定义指令范围时使用“@”。这使指令隔离范围能够访问 p,例如在链接中:

return {
   scope: '@',
   link: function(scope) {
       console.log(scope.p); //It can now be accessed because of '@'
   }
}
于 2013-10-10T10:08:54.463 回答
3

您不需要在指令中创建隔离范围。ng repeat 会自动为您执行此操作。所以只需删除:

在指令中:

scope: {
   person: '='
},

并在 ng 中重复 html 标记:

person='p'

在您的指令中,您将能够访问类似

$scope.p.personAttribute

就像这里的解释中提到的: angularjs-pass-instance-of-each-ng-repeat-in-html-to-directive

于 2014-07-23T10:07:05.497 回答