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