仅当元素悬停在 AngularJS 中时，如何分配变量？
Posted
技术标签:
【中文标题】仅当元素悬停在 AngularJS 中时，如何分配变量？【英文标题】：How do I assign a variable only when an element is hovered in AngularJS? 【发布时间】：2018-12-31 07:24:15 【问题描述】：我有一堆可以悬停的 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 的值设置为悬停元素的 data-number 属性。
还必须有没有元素悬停的情况，hover.hoveredNumber的值为0。
我考虑过使用 ng-mouseover 和 ng-mouseleave 为每个可悬停的 div 手动触发 mouseover 和 mouseleave 事件，并从那里确定悬停的元素。
我的问题是每个可悬停的 div 在 CSS 中也有一个 :hover 样式。我知道:hover 非常可靠，但我不相信这两个单独的鼠标检测事件同样可靠，尤其是当用户快速移动光标并且错过了其中一个事件时。
我预计，hover.hoveredNumber 中反映的元素与当前显示其:hovered 样式的元素之间有时会存在一些差异。在某些情况下，可悬停的 div 也非常靠近并重叠，我担心一个 div 的 mouseover 事件可能会在另一个 div 的 mouseleave 事件之前触发，从而导致差异。
如何保证悬停的元素的准确性？
【问题讨论】：
查看***.com/questions/37686772/angular-2-hover-event @RoqueSantos 我使用的是 AngularJS，而不是 Angular2 好吧，我在这里找到了另一个例子***.com/a/22532856/2721661 @RoqueSantos 这些答案解释了我需要做什么才能建立 mouseover 和 mouseleave 事件，但我已经涵盖了 - 我担心的是它们的可靠性和具体时间 我明白，但鉴于这些答案，我发现没有悬停事件，大多数人使用这些链接上描述的技术。 【参考方案1】：如果您希望它具有响应性，请避免使用 ng-mouseover 和 ng-mouseleave。这些指令调用具有大量计算开销的 AngularJS 摘要循环。
改为使用自定义指令：
angular.module("app",[])
.directive("detect",function()
return
link: postLink,
function postLink(scope,elem,attrs)
elem.on("mouseover mouseleave", function(e)
var $target = angular.element(e.target);
var num = $target.attr("data-number") || '0';
console.log("hover.hoveredNumber is",num);
)
).hoverable
background-color: red;
height: 20px;
width: 30px;
text-align: center;
border-radius: 10px;
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<fieldset detect>
<div class="hoverable" data-number="1">1</div>
<div class="hoverable" data-number="2">2</div>
<div class="hoverable" data-number="3">3</div>
</fieldset>
</body>【讨论】：
我只是把脚趾伸进了你游泳的这个 AngularJS 游泳池。以上是关于仅当元素悬停在 AngularJS 中时，如何分配变量？的主要内容，如果未能解决你的问题，请参考以下文章
仅当数组有两个或多个带有 angularjs ng-show 的项目时，如何显示元素？
使用 CSS 或 AngularJS 的 SVG 路径元素悬停缩放