与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);
  };
}

(这是一般的想法,实际的实施留给你,如果你需要帮助,请告诉我)