javascript - 如何使 ng-repeat 内的 ng-click 影响外部范围

标签 javascript angularjs angularjs-directive

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

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

它适用于 ng-repeat 之外的任何元素。我怎样才能让它工作?

最佳答案

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

Whenever you want to set a property on the scope, either via ng-model or inside an expression, always make sure you have a . (dot/period) in the expression.

因为在您的情况下发生的情况是 ng-repeat 正在为数组中的每个项目创建一个新范围。当您使用 ng-click="signUp = !signUp" 时,这会在该项目的范围上创建一个全新的 signUp 属性,而不是修改 进一步向上作用域的 SignUp 属性(通过作用域对象的原型(prototype))。这是因为每当您在 JS 对象上设置属性时,它都会在当前对象上设置它,即使该属性存在于原型(prototype)上。

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

这一切都有意义吗?

关于javascript - 如何使 ng-repeat 内的 ng-click 影响外部范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25902185/

相关文章:

javascript - 如何调用外部 API,然后从 hapi.js Api 返回此数据

javascript - 在模块内创建对象 javascript

javascript - 每个表格单元格仅允许一个查询结果

javascript - 在angularjs中填充下拉选择

Angularjs 路由 : TypeError: Cannot read property 'path' of undefined

javascript - ng-click inside templateUrl 指令不起作用

javascript - 纯 JS 的上下文菜单

javascript - 自动刷新 .filter() 范围

javascript - ui-router状态url问题

angularjs - 使用 $location 和 $routeParams 等依赖项测试 Angular 指令