angularjs - 嵌套 ng-repeat $parent.$index 和 $index

Question

我有一个奇怪的错误，不幸的是，我无法用 jsfiddle 复制它。除了以下代码片段之外，我已经注释掉了整个代码(除了库等)。有什么明显的事情我不明白吗？有什么想法吗？

这可以工作并打印:(0,0) (0,1) (1,0) (1,1)

<div ng-repeat="i in list">
    <div ng-repeat="j in list2">
        <div>
            ({{$parent.$index}} {{$index}})
        </div>
    </div>
</div>

但是，这段代码打印:(0,0) (1,1) (0,0) (1,1)

<div ng-repeat="i in list">
    <div ng-repeat="j in list2">
        <div ng-if="1">
            ({{$parent.$index}} {{$index}})
        </div>
    </div>
</div>

我的 Controller 是:

$scope.list  = [1, 2];
$scope.list2 = [1, 2];

Answer 1

<强> DEMO FIDDLE

这是因为指令 ng-if 为自己创建了一个新的作用域，当您引用 $parent 时，它会访问直接的 $parent > 的范围，即内部重复表达式的范围。

所以如果你想实现你想要的东西，就像前者，你可以使用这个:

<div ng-repeat="i in list">
    <div ng-repeat="j in list2">
        <div ng-if="1">
            ({{$parent.$parent.$index}} {{$parent.$index}})
        </div>
    </div>
</div>

如果您有多个内部指令，则可以使用 ng-init 将 $index 存储在变量中以供子作用域中的引用。

<div ng-repeat="i in list" ng-init="outerIndex=$index">
    <div ng-repeat="j in list2" ng-init="innerIndex=$index">
        <div ng-if="1">
            ({{outerIndex}} {{innerIndex}})
        </div>
    </div>
</div>

我强烈建议您阅读understanding scopes in angular上的这篇文章