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

Question

我有一堆可以悬停的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反映的元素与当前显示其:hover ed样式的元素之间会有一些差异。 可悬停的div在某些情况下也非常靠近并重叠，我担心一个div的mouseover事件可能会在另一个mouseleave事件之前触发，从而导致差异。

我如何保证要悬停在哪个元素上的准确性？

Answer 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中悬停时才如何分配变量？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-07-24 00:59:30

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-07-24 00:59:30

解决方案1
1 已采纳 2018-07-24 00:59:30