Question

我有这个相当简单的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部分。对此有任何合理的解释吗？

FIDDLE

Answer 1

是的，您的第二个指令是创建一个独立的范围。

scope: {
    dir2: "="
},

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

来自documentation here：

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

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

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

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

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

这是working fiddle。

angularJS：为什么绑定到指令范围内会导致ng-repeat内容丢失？

1 个答案: