Question

我有一堆可以悬停的divs。

<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样式的元素之间会有一些差异。可悬停的div在某些情况下也非常靠近并重叠，我担心一个div的mouseover事件可能在另一个div的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 个答案: