☰

ディレクティブのスコープ内の ng-repeat 項目にアクセスするにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon angularjs angularjs-directive
ディレクティブのスコープ内の 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 }];
}

ベストアンサー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>'
}

おすすめ記事