代码之家 › 专栏 › 技术社区 › snazzybouche

如何仅在元素悬停在angularjs中时分配变量?

angularjs css javascript

snazzybouche · 技术社区 · 8 年前

我有一堆可以悬停的潜水器。

<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也有一个 :hover CSS中的样式我明白 :悬停 是非常可靠的,但我不相信这两个单独的鼠标检测事件是如此可靠,特别是如果用户移动光标非常快,其中一个事件被忽略。

我希望,有时,哪一个元素反映在 hover.hoveredNumber号 以及当前显示其 :悬停 埃德风格可悬停的div在某些情况下也非常接近和重叠,我担心一个div的mouseover事件可能在另一个div的mouseleave事件之前触发,从而导致差异。

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

1 回复 | 直到 8 年前

georgeawg 8 年前

如果你想让它有反应,避免 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>