web-dev-qa-db-ja.com

ディレクティブのスコープで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 }];
}
angularjsangularjs-directive
22
iLemming

「スコープ値を設定する」によってテンプレートが機能することを意味する場合、

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>'
}
26
Mark Rajcok

ディレクティブで分離スコープを作成する必要はありません。 ng repeatはこれを自動的に行います。だから削除してください：

ディレクティブで：

scope: {
   person: '='
},

そしてng repeat html markup：

person='p'

ディレクティブでは、次のようなものにアクセスできます

$scope.p.personAttribute

ここの説明で述べたように： angularjs-pass-instance-of-each-ng-repeat-in-html-to-directive

3
Guntram

ディレクティブのスコープを定義するときに「@」を使用したい。これにより、分離されたディレクティブのスコープがpにアクセスできるようになります（リンクなど）。

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