防抖與ngMouseover

Question

我有一個使用了ngMouseover指令通過一個函數來獲取從API的一些數據如下該HTML DIV：

標記：

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

控制器：

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

有沒有什麼方法可以在上添加延遲指令是否只在光標在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); 
    }; 
} 

（這是一般的想法，實際執行留給你，如果你需要幫助，讓我知道）