1

私はこのかなり単純な HTML 構造を持っています:

<div ng-controller="MyCtrl">
    <div dir1="xy"><div>dir1static</div><div ng-repeat="item in items">dir1</div></div>
    <div dir2="xy"><div>dir2static</div><div ng-repeat="item in items">dir2</div></div>
</div>

そして、そのうちの 1 つ (dir2) がスコープにバインドされた属性を持つ 2 つのディレクティブ:

myApp.directive("dir1", function () {

    return {
        restrict: "A",    
        link: function (scope, element, attributes) {
        }
    };
});

myApp.directive("dir2", function () {

    return {
        restrict: "A", 
        scope: {
            dir2: "="
        },
        link: function (scope, element, attributes) {
        }
    };
});

次のコントローラーを使用します。

function MyCtrl($scope) {
    $scope.xy = 2;
    $scope.items = [1,2,3];
}

次の出力が得られます。

dir1static
dir1
dir1
dir1
dir2static

したがって、基本的に、2 番目のディレクティブを使用する場合、ng-repeat 部分はレンダリングされません。これについて論理的な説明はありますか？

フィドル

4

1 に答える 1

1

はい、2 番目のディレクティブは分離スコープを作成しています。 

scope: {
    dir2: "="
},

したがって、反復しているコレクション はitems、2 番目のディレクティブ スコープに継承されません。

ここのドキュメントから：

AngularJS では、通常、子スコープはプロトタイプとして親スコープから継承します。このルールの 1 つの例外は、スコープを使用するディレクティブです: { ... } -- これにより、プロトタイプとして継承されない「分離」スコープが作成されます。この構造は、「再利用可能なコンポーネント」ディレクティブを作成するときによく使用されます。

これを機能させる簡単な方法itemsは、2 番目のディレクティブ スコープでリストへの参照を渡すことです。

scope: {
    dir2: "=",
    items: "=",
},

items次に、属性として渡して、既存の を結び付けng-repeatます。

<div dir2="xy" items="items">

ここに実用的なフィドルがあります。

于 2013-11-03T23:43:02.040 に答える