为什么ng-mouseover不适用于ng-if

Question

我正在尝试在具有"ng-if"的图像上使用"ng-mouseover"指令并且它不起作用但是如果我使用"ng-show"指令它可以工作,大家能告诉我为什么吗？或者这是一个AngularJS问题？

在AngularJS文档中,我无法阅读有关它的任何内容:https://docs.angularjs.org/api/ng/directive/ngMouseover

NG-秀

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

NG-如果

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

小提琴:http://plnkr.co/edit/Wb6bjyJdHj5qoH7fxGFJ？p = info

Answer 1

您观察到的行为是由ngIf工作方式引起的- 来自文档

请注意,使用ng删除元素时 - 如果其范围被销毁,并且在还原元素时创建新范围.在ngIf中创建的作用域使用原型继承从其父作用域继承.这一点的一个重要含义是,如果在ngIf中使用ngModel绑定到父作用域中定义的javascript原语.在这种情况下,对子范围内的变量所做的任何修改都将覆盖(隐藏)父范围中的值.

这基本上意味着你需要使用,$parent如果你正在使用ng-if.像这样:

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