ng-click not working with ng-if

All we need is an easy explanation of the problem, so here it is.

Why does the second button not work, when ng-if is used?

I want to realize a button that is present only when the model value is set / not “”/ not null.

Template:

<input type="text" ng-model="blub"/>
<br/>
<button ng-click="blub = 'xxxx'">X</button>
<br/>
<button ng-click="blub = 'yyyy'" ng-if="blub.length">Y</button>

Controller:

angular.module('test', [])
.controller('Main', function ($scope) {
    // nothing to do here
});

To play around: JSFiddle

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Use ng-show Instead of ng-if. That should work.

Fiddle

Method 2

It doesn’t work because ng-if is creating a new scope and interpreting your blub = ‘yyyy’ as defining a new local variable in the new scope.
You can test this by putting the second button to:

<button ng-click="$parent.blub = 'yyyy'" ng-if="blub.length">Y</button>

However $parent is an ugly feature.

Method 3

The button doesn’t work because of the nested scope created by ng-if. The blub bound to the second button is not the same blub that’s bound to the first one.

You can use ng-show instead of ng-if, since it uses its parent’s scope, but that’s just avoiding the problem instead of solving it. Read about nested scopes so you can understand what actually happened.

Also, check this out: fiddle

Method 4

Try putting a magic dot on the variable

<input type="text" ng-model="bl.ub"/>
<br/>
<button ng-click="bl.ub = 'xxxx'">X</button>
<br/>
<button ng-click="bl.ub = 'yyyy'" ng-if="bl.ub.length">Y</button>

jsfiddle

Method 5

you can use : [hidden]="!expression"

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply