css - 角度：在悬停时更新范围

Question

当您将鼠标悬停在主 div 上时，我希望默认情况下隐藏主 div 的一些子 div。

我正在尝试使用 Angular 来使用原生并忘记.hover()jquery 中的方式。

我想ng-show在子 div 上使用，然后在悬停主 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钥匙。