5

我正在尝试在具有“ng-if”的图像上使用“ng-mouseover”指令并且它不起作用但是如果我使用“ng-show”指令它可以工作，每个人都可以告诉我为什么吗？还是 AngularJS 的问题？

在 AngularJS 文档中，我什么也读不到：https ://docs.angularjs.org/api/ng/directive/ngMouseover

吴秀

<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}}

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

4

4 回答 4

6

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

请注意，当使用 ng-if 删除元素时，它的作用域被破坏，而当元素恢复时会创建一个新作用域。在 ngIf 中创建的范围使用原型继承从其父范围继承。一个重要的含义是，如果在 ngIf 中使用 ngModel 来绑定到父作用域中定义的 javascript 原语。在这种情况下，对子范围内的变量所做的任何修改都将覆盖（隐藏）父范围内的值。

这基本上意味着$parent如果您使用ng-if. 像这样：

<button ng-if="true" ng-mouseover="$parent.countTwo = countTwo + 1" ng-init="$parent.countTwo=0">
于 2015-09-01T14:33:02.793 回答
1

ng-if像其他指令一样创建一个子范围。您的代码需要 a$parent指向您想要的范围。

尝试这样的事情：

<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

于 2015-09-01T14:30:57.373 回答
0

你正在使用ng-if所以你必须使用$parent

工作笨拙

ng-if

<button ng-if="true" ng-mouseover="$parent.countTwo = countTwo + 1" ng-init="$parent.countTwo=0">
Increment (when mouse is over)
</button>
Count: {{countTwo}}
于 2015-09-01T14:29:23.050 回答
0

我认为这是因为 $event 超出了该绑定的范围。

here is an example:

http://plnkr.co/edit/Wb6bjyJdHj5qoH7fxGFJ?p=preview
于 2015-09-01T15:51:01.770 回答