使用ng-if时,ng-click停止工作

Question

所以我有一个名为"show more"的按钮,一旦达到我希望更改为名为"show less"的按钮的列表的最大数量,它将增加列表中的项目数量,从而使列表恢复到其默认值.

我使用ng-if来确定要显示的按钮和ng-单击以确定操作.当它们一起使用时,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,没有动画,而且速度更快.

这是show more按钮的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>

Answer 1

我认为你遇到了angularjs和子范围继承的常见问题.

您是数据绑定到原始值,ng-if正在创建子范围.当你的ng-click指令改变'feedLimit'的值时,你实际上是在子范围上创建一个新的'feedLimit'属性,但ng-if指令绑定到父范围的'feedLimit'.

解决方案是避免绑定到原始值.而是确保通过绑定到对象来使用点符号.

代替

<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模型中