ng单击在使用ng if时停止工作

ng-click stops working when using ng-if

本文关键字：ng 停止工作 if 单击      更新时间：2023-09-26

所以我有一个名为"show more"的按钮，一旦列表中的项目数达到我想要更改的最大列表数，它就会增加列表中的项数。

我使用ng-if来确定要显示哪个按钮，并使用ng-click来确定操作。当它们一起使用时，ng click停止工作，当我单击时不会发生任何事情。

这是我用jade写的html，feedLimit是列表中显示的项目数。

button.btn.btn-primary.btn-block.btn-sm.btn-outline(type='button')(ng-if= "feedLimit < notifications.all.length", ng-click="feedLimit = feedLimit + 4")
  span(translate) Show More
button.btn.btn-primary.btn-block.btn-sm.btn-outline(type='button')(ng-if= "feedLimit >= notifications.all.length", ng-click="feedLimit = 4")
  span(translate) Show Less

我试过使用ng show和ng hide，它们效果很好，但最好使用ng if，因为没有动画，而且速度更快。

这是显示更多按钮的html输出

<button type="button" ng-if="feedLimit < notifications.all.length" ng-click="feedLimit = feedLimit + 4" class="btn btn-primary btn-block btn-sm btn-outline ng-scope" style=""><span class="ng-scope">Show More</span></button>

我认为您遇到了angularjs和子作用域继承的常见问题。

您是绑定到基元值的数据，如果正在创建子作用域，则为ng。当ng-click指令更改"feedLimit"的值时，实际上是在子作用域上创建一个新的"feedLimited"属性，但ng-if指令绑定到父作用域的"feedRimit"。

解决方案是避免绑定到基元值。相反，请确保通过绑定到对象来使用点表示法。

代替

<button ng-if="feedLimit < notifications.all.length" ng-click="feedLimit = feedLimit + 4">

试试

<button ng-if="someObj.feedLimit < notifications.all.length" ng-click="someObj.feedLimit = someObj.feedLimit + 4">

以下是对发生的事情的更详细的解释

https://github.com/angular/angular.js/wiki/Understanding-Scopes

作用域继承通常很简单，但您通常不会甚至需要知道它正在发生。。。直到您尝试双向数据绑定（即，形式元素，ng模型）到基元（例如，数字，字符串，boolean）。它并没有像大多数人期望的那样工作。发生了什么子作用域获得自己的属性，该属性隐藏/隐藏同名的父属性。AngularJS不是这样的这就是JavaScript原型继承的工作原理。新AngularJS开发人员往往没有意识到ng repeat、ng switch、，ng-view和ng-include都创建了新的子作用域，因此问题通常在涉及这些指令时显示。（参见此示例以便快速说明问题。）

通过遵循"最佳实践"总是有一个"。"在你的ng型号

相关文章：