Why does ng-mouseover not work with ng-if

Question

I'm trying to use "ng-mouseover" directive on an image that has "ng-if" and it doesn't work but If I use "ng-show" directive it works, can everyone tell me why? Or it's an AngularJS problem?

In the AngularJS documentation, I can't read anything about it: https://docs.angularjs.org/api/ng/directive/ngMouseover

ng-show

<button ng-show="true" ng-mouseover="countOne = countOne + 1" ng-init="countOne=0">
Increment (when mouse is over)
</button>
Count: {{countOne}}

ng-if

<button ng-if="true" ng-mouseover="countTwo = countTwo + 1" ng-init="countTwo=0">
Increment (when mouse is over)
</button>
Count: {{countTwo}}

Fiddle: http://plnkr.co/edit/Wb6bjyJdHj5qoH7fxGFJ?p=info

Answer 1

The behaviour you're observing is caused by how ngIf works - from the docs

Note that when an element is removed using ng-if its scope is destroyed and a new scope is created when the element is restored. The scope created within ngIf inherits from its parent scope using prototypal inheritance. An important implication of this is if ngModel is used within ngIf to bind to a javascript primitive defined in the parent scope. In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope.

Which basically means that you need to use $parent if you're using ng-if. Like so:

<button ng-if="true" ng-mouseover="$parent.countTwo = countTwo + 1" ng-init="$parent.countTwo=0">

Answer 2

ng-if like other directives creates a child scope. Your code requires a $parent to point to your desired scope.

try something like this:

<p>
  <button ng-if="true" ng-mouseover="$parent.countTwo = countTwo + 1" ng-init="$parent.countTwo=0">
    Increment (when mouse is over)
  </button>
  Count: {{countTwo}}
</p>

plunkr