与ngMouseover辩论

Question

我有这个HTML div，它使用ngMouseover指令通过函数从api获取一些数据，如下所示：

标记：

<div ng-mouseover="getData()">
</div> 

控制器：

$scope.getData = function() {
    //get data from api
}

有没有什么办法可以为ngMouseover指令添加一个延迟，这样只有在光标在div上停留几秒后才会触发它？与debounce中的ngModelOptions一样。

Answer 1

您可以使用onmouseenter和onmouseleave的组合：如果鼠标进入元素并且不会离开至少2秒，则进行评估。

<div debounce-mouseover="getData()" stay-at-least="2"></div>

指令debounceMouseover是：

template: "<div ng-mouseenter="onEnter()" ng-mouseleave="onLeave()">",

link: function(scope, elem, attrs) {
  var stayAtLeast = attrs.stayAtLeast;
  var timer;

  scope.onEnter = function() {
    timer = $timeout(function() {
      scope.$eval(attrs.debounceMouseover);
    }, stayAtLeast);
  };

  scope.onLeave = function() {
    $timeout.cancel(timer);
  };
}

（这是一般性的想法，如果你需要帮助我会留给你实际的实施）