Question

当你将鼠标悬停在主div上时，我希望默认隐藏一个主div的子div。

我正试图让角色中的本地人忘记jquery中的.hover()方式。

我虽然在子div上使用ng-show然后在我悬停主div时更新绑定。是否有指令来监听悬停？

Answer 1

你走在正确的轨道上。您实际上可以使用ngMouseenter和ngMouseleave指令来执行此操作。

<span ng-mouseenter="show = true" ng-mouseleave="show = false">
  Mouse over me.
</span>

<div ng-show="show">Hello!</div>

这是一个有效的Plunker：http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview

@ Swordfish0321也是对的 - 你可以编写一个非常简单的指令来专门监听你的悬停，但可能没有必要。例如，我们在UI Bootstrap中使用mouseenter和mouseleave作为工具提示。

Answer 2

感谢@JoshDavidMiller提供了一个非常简洁的答案。我需要在ng-repeat中执行此操作，并且无法找到一种优雅的方法来完成它。在示波器上使用布尔值显示列表中所有元素的编辑控件，而不仅仅是我悬停的那个元素。我几乎弯腰甩掉angular.element（即JQuery）并自己附加悬停处理程序，这样他们就可以手动显示悬停元素的控件。我很高兴我没有屈服于这种邪恶的方式。

<div ng-repeat="item in items" ng-mouseenter="item.showEdit = true" ng-mouseleave="item.showEdit = false">
    <span class="glyphicon glyphicon-edit" ng-show="item.showEdit"></span>
    Mouse over me.
</div>

只需将属性附加到item而不是$scope。在一些情况下，我无法将随机密钥添加到列表中的项目，因此我将我的数组映射到一个新的数组，其中item实际上是包装器对象上的属性，然后我可以附加任何属性我想要包装器对象而不会污染item键。

angular：更新悬停时的范围

2 个答案: