角度：在悬停时更新范围

Posted 2023-03-06

【中文标题】角度：在悬停时更新范围

【英文标题】：angular: updating scope on hover

【发布时间】：2013-03-24 05:50:09

【问题描述】：

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

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

我想在子 div 上使用 ng-show，然后在我将鼠标悬停在主 div 时更新绑定。是否有监听悬停的指令？

【问题讨论】：

没有悬停指令（例如ng-hover），但你可以写一个！这就是 AngularJS 的美妙之处。 =)

【参考方案1】：

感谢@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 键。

【讨论】：

我有一个类似的问题，我通过明确引用 $parent 范围来解决。在此之前，当我尝试直接更新对象时，它只是在较低范围内创建了一个同名的新字段。

@downhand 对，这是因为作用域继承。您可以读取继承的属性，但设置它们只会隐藏底层原型属性，而不是覆盖它。更多的是 javascript 限制而不是 Angular 限制:)

【参考方案2】：

你在正确的轨道上。您实际上可以使用 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 也是正确的——如果你愿意，你可以编写一个非常简单的指令来专门监听悬停，但这可能不是必需的。例如，我们使用mouseenter 和mouseleave 作为UI Bootstrap 中的工具提示。

【讨论】：

@Josh David Miller。如果我将鼠标悬停在它上面，我也想显示“你好”。我不能把它作为内部 div。有什么帮助吗？