ng-mouseover funktioniert nicht mit ng-if

Question

Ich versuche "ng-mouseover" -Direktive auf Bild zu verwenden, die "ng-if" haben und es funktioniert nicht, aber wenn ich "ng-show" verwende Richtlinie funktioniert es, kann mir jeder sagen warum? Oder ist es ein AngularJS-Problem?

In der AngularJS Dokumentation kann ich nichts darüber gelesen: 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-wenn

<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

Das Verhalten, das Sie durch, wie ngIf Arbeiten verursacht wird, sind zu beobachten - from the docs

Beachten Sie, dass, wenn ein Element entfernt wird unter Verwendung ng -wenn der Bereich zerstört wurde und ein neuer Bereich erstellt wird, wenn das Element wiederhergestellt wird. Der innerhalb von ngIf erstellte Gültigkeitsbereich erbt von seinem übergeordneten Bereich unter Verwendung der prototypischen Vererbung . Eine wichtige Implikation davon ist, wenn ngModel in ngIf verwendet wird, um an ein JavaScript-Element zu binden, das im übergeordneten Bereich definiert ist. In diesem Fall überschreiben alle Änderungen an der Variablen innerhalb des untergeordneten Bereichs den Wert im übergeordneten Bereich.

Das bedeutet im Grunde, dass Sie $parent verwenden müssen, wenn Sie ng-if verwenden. Wie so:

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

Answer 2

Sie verwenden ng-if, also müssen Sie 01 verwenden

Arbeits plunkr

ng-wenn

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

Answer 3

ng-if wie andere Richtlinien erstellt ein Kind Umfang. Ihr Code erfordert $parent, um auf den gewünschten Bereich zu zeigen.

versuchen, etwas wie folgt aus:

<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

Answer 4

Ich denke, das liegt daran, $ Event ist außerhalb des Umfangs dieser Bindung.

here is an example: 

http://plnkr.co/edit/Wb6bjyJdHj5qoH7fxGFJ?p=preview