Javascript 如何仅在元素悬停在AngularJS中时分配变量？

我有一堆可以悬停的div

<div ng-controller="HoverController as hover">
  <div class="hoverable" data-number="1"></div>
  <div class="hoverable" data-number="2"></div>
  <div class="hoverable" data-number="3"></div>
</div>

我想做的是，当每个.hoverable div悬停时，将

hover.hoveredNumber

的值设置为悬停元素的数据编号属性

还必须存在一个条件，其中没有元素悬停，并且

hover.hoveredNumber

的值为0

我考虑过使用ng mouseover和ng mouseleave手动触发每个可悬停div的mouseover和mouseleave事件，然后确定悬停的元素

我的问题是，每个可悬停div在CSS中也有一个

：hover

样式。我知道

：hover

非常可靠，但我不相信两个单独的鼠标检测事件是可靠的，特别是当用户非常快地移动光标并且错过其中一个事件时

我希望在

hover.hoveredNumber

中反映的元素与当前显示其

：hover

样式的元素之间有时会存在一些差异。可悬停div在某些情况下也非常接近和重叠，我担心一个div的mouseover事件可能会在另一个div的mouseleave事件之前触发，从而导致差异

---

如何保证悬停元素的准确性？

如果您希望悬停元素具有响应性，请避免使用

ng mouseover

和

ng mouseleave

。这些指令调用AngularJS摘要周期，计算开销很大

而是使用自定义指令：

角度模块（“应用程序”，[]） .指令（“检测”，函数（）{ 返回{ 链接：postLink， } 功能后链接（范围、元素、属性）{ 要素开启（“鼠标悬停”，功能（e）{ var$target=角度元素（即目标）； var num=$target.attr（“数据编号”）||“0”； log（“hover.hoveredNumber为”，num）； }) } })

。可悬停{
背景色：红色；
高度：20px；
宽度：30px；
文本对齐：居中；
边界半径：10px；
}

1.
2.
3.

检查这个@RoqueSantos我用的是AngularJS，不是Angular2well，我在这里找到了另一个例子@RoqueSantos这些答案解释了我需要做什么来建立鼠标悬停和鼠标悬停事件，但我已经涵盖了这一点-我关心的是它们的可靠性和具体的计时我理解，但给出了这些答案，我看到没有悬停事件，大多数人都使用这些链接上描述的技术。我只是将脚趾浸入你游泳的AngularJS游泳池中。