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>

还有两个指令，其中一个 (dir2) 具有绑定到范围的属性：

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

因此，本质上，使用第二个指令时不会呈现 ng-repeat 部分。这有什么合乎逻辑的解释吗？

小提琴

4

1 回答 1

1

是的，您的第二个指令是创建一个隔离范围。 

scope: {
    dir2: "="
},

因此，您正在迭代的集合items, 不会被继承到第二个指令范围中。

从这里的文档：

在 AngularJS 中，子作用域通常从其父作用域原型继承。该规则的一个例外是使用范围的指令： { ... } - 这会创建一个在原型上不继承的“隔离”范围。创建“可重用组件”指令时经常使用此构造。

使其工作的一种简单方法是items在第二个指令范围内传递对列表的引用：

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

items然后作为属性传入以连接现有的ng-repeat：

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

这是一个工作小提琴。

于 2013-11-03T23:43:02.040 回答