如何在ng-repeat中进行ng-click会影响外部范围

Question

我遇到以下情况，我有一个元素，通过ng-click在其他元素中添加一个类。其中一些是在具有自己范围的ng-repeat循环中... 像这样的东西： <section id="sign-up" class="sign-up" ng-init="signUp = false"ng-class="{'active': signUp}">

并且单击时触发类更改的元素使用此ng-click="signUp = !signUp"

它适用于任何不在重复内部的元素。如何使其起作用？

Answer 1

这是一个不遵循我认为的AngularJS黄金法则的经典案例：

  

每当你想在范围上设置属性时，无论是通过ng-model还是在表达式中，总是要确保你有一个属性。表达式中的（点/句点）。

因为您的案例中发生的事情是ng-repeat正在为数组中的每个项创建新范围。然后，当您拥有ng-click="signUp = !signUp"时，这会在该项的范围上创建一个全新的signUp属性，而不是进一步修改范围内的signUp属性（通过范围的原型）宾语）。这是因为无论何时在JS对象上设置属性，它都会在当前对象上设置它，即使该属性存在于原型上也是如此。

相反，尝试更改它以使用顶级作用域上的中间对象来保存signUp属性，因此您可以将其称为flags.signUp。这意味着Angular首先在子作用域中查找flags的值，并通过原型在父作用域上找到该对象。然后，它可以在正确的对象上设置signUp标志，而不是在子范围上。

这一切都有意义吗？