私は AngularJS の新しいユーザーであり、ng-repeat 内のディレクティブからコントローラーの変数にアクセスする必要があるときに行き詰まります。スコープに関連するものでなければならないと思います。
これが私のフィドルです:http://jsfiddle.net/Zzb58/1/
'MyCtrl' スコープには 2 つのプロパティがあります。配列である "items" と単なる文字列である "thing" です。
function MyCtrl($scope) {
$scope.items = [{id: 'item1'}, {id: 'item2'}];
$scope.thing = "thing";
}
したがって、ディレクティブを作成し、配列の内容を読み取らせたい場合、これは完全に機能します。
<div my-directive ng-repeat="item in items" item='item'></div>
app.directive('myDirective', function () {
return {
restrict: 'AE',
scope: {
item: '=item',
},
template: '<div>{{ item.id }}</div>'
}
});
HTML が適切に更新されます。
しかし、ディレクティブから「thing」変数にアクセスしようとすると、常に「未定義」として読み取られます。
app.directive('myDirective', function () {
return {
restrict: 'AE',
scope: {
item: '=item',
thing: '='
},
template: '<div>{{ item.id }} - Here is not the {{thing}}</div>'
}
});
問題は ng-repeat で作成されたスコープの子に関連している必要があると思います。または、変数が正しくバインドされていない可能性があります。
ただし、テンプレートで $parent.thing を使用すると、変数が読み取られて適切に評価されますが、その $parent が ng-repeat スコープなのか 'MyCtrl' スコープなのかわかりません。
1) 私は何を間違っていますか?
2) ng-repeat で読み込んだ「item」要素を HTML 要素の属性として入れる必要があるのはなぜですか? 最初は「items」が親スコープにあると思っていたので、ディレクティブの分離スコープが作成されたら、「items: '='」のようなことをするだけで済みます。