AngularJS中带有ng-repeat作用域的指令隔离作用域

Question

因此，我希望可以使用优先级来确保我的指令首先运行，并最终创建一个隔离范围，当ng-repeat运行时，它重用隔离范围，而不是创建一个原型上从父范围继承的范围。ng-repeat文档声明该指令在优先级1000下运行。尚不清楚1是高优先级还是低优先级。当我在指令中使用优先级1时，没有什么不同，所以我尝试了2000。但这使情况变得更糟：我的双向绑定变成undefined，并且我的指令不显示任何内容。

我创造了一个小提琴来显示我的问题。我已经注释掉了指令中的优先级设置。我有一个name对象列表和一个名为name-row的指令，它显示name对象中的first和last name字段。当单击显示的名称时，我希望它在主作用域中设置一个selected变量。名称数组、selected变量使用双向数据绑定传递给name-row指令。

我知道如何通过调用main作用域中的函数来实现这一点。我还知道，如果selected位于另一个对象内部，并且我绑定到外部对象，事情就会正常工作。但我目前对那些解决方案不感兴趣。

null

Answer 1

好吧，通过上面的很多评论，我发现了困惑。首先，澄清几点：

• ngrepeat不影响您选择的隔离范围
• 传入ngRepeat用于指令属性的参数确实使用了原型继承的作用域
• 指令不起作用的原因与隔离范围无关

下面是一个相同代码的示例，但删除了指令：

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

注意，在ngRepeat作用域上创建了一个新的selected属性。控制器作用域003未被更改。

你大概可以猜到当我们点击第二项时会发生什么：

因此，您的问题实际上根本不是由ngRepeat引起的--而是由违反AngularJS中的黄金规则引起的。修复它的方法是简单地使用一个对象属性：

js prettyprint-override">$scope.state = { selected: undefined };

<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

此外，为了证明这仍然适用于具有隔离作用域的指令（因为，同样，这与您的问题无关），这里也有一个JSFiddle，视图必须反映对象。您将注意到，唯一必要的更改是使用对象而不是原语。

最初的范围：

单击第一项后的作用域：