5

私は 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: '='」のようなことをするだけで済みます。

4

1 に答える 1