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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (12)

我有一堆可以悬停的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 :hover在CSS中也有一个样式。我知道:hover是非常可靠的,但我不相信这两个单独的鼠标检测事件是可靠的,特别是如果用户正在快速移动光标,其中一个事件会被遗漏。

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

提问于
用户回答回答于

如果你希望它具有响应性,请避免ng-mouseoverng-mouseleave

而是使用自定义指令:

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>

扫码关注云+社区

领取腾讯云代金券