Ng-click stops working when using ng-if

Question

So, I have a button called “show more” that will increase the number of items in the list as soon as it reaches the maximum number of lists that I want to change, to the “show less” button, which returns the list back to its default value.

I use ng-if to determine which button will be shown, and ng-click to determine the action. When used together, ng-click stops working and nothing happens when I click.

here is the html that I wrote in jade, feedLimit is the number of elements displayed in the list.

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 

I tried using ng-show and ng-hide, and they work fine, but it is better to use ng-if, there is no animation and it is faster.

Here is another html output of the show button

 <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

I think you are facing a common inheritance issue with angularjs and child.

You bind data to a primitive value, and ng-if creates a child region. When the ng-click directive changes the value of "feedLimit", you actually create a new feedLimit property for the child region, but the ng-if directive is bound to the "feedLimit" of the parent region.

The solution is to avoid binding to a primitive value. Instead, make sure you use dot notation by snapping to an object.

Instead

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

try something like

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

Here is a more detailed explanation of what is happening.

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

Inheriting regions is usually simple, and you often don’t even need to know that this is happening ... until you try two-way data binding (i.e. form elements, ng-model) to primitive (e.g. number, string, boolean) defined in the parent area inside the content area. This does not work as many expect it to work. What happens is that the child region gets its own property, which hides / obscures the parent property with the same name. This is not what AngularJS does - prototype JavaScript inheritance works this way. new AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view, and ng-include all create new child areas, so the problem often arises when these directives are involved. (See this example for a quick illustration of the problem.)

This problem with primitives can be easily avoided by following “best practice” always has “.”. in your ng models