var app = angular.module('myapp', []);
app.controller('PopupCtrl', function($scope, $timeout){
$scope.show = 'none';
$scope.mouseover = function(){
console.log('Mouse Enter');
$scope.show = 'block';
};
$scope.mouseout = function(){
console.log('Mouse Leave');
var timer = $timeout(function () {
$scope.show = 'none';
}, 2000);
};
});
当我将鼠标悬停在按钮上时,将显示一个弹出对话框。当我将鼠标移出时,弹出对话框将在两秒钟内隐藏。问题是当我第二次将鼠标悬停在按钮上时。甚至我的光标仍在按钮上,弹出对话框在两秒钟内隐藏起来。当鼠标再次位于按钮上方时,如何停止计时器?
最佳答案
$timeout
服务返回可以使用 $timeout.cancel()
取消的promise。在您的情况下,您必须取消鼠标悬停时的超时。
DEMO
JAVASCRIPT
var app = angular.module('myapp', []);
app.controller('PopupCtrl', function($scope, $timeout){
var timer;
$scope.show = false;
$scope.mouseover = function(){
$timeout.cancel(timer);
$scope.show = true;
};
$scope.mouseout = function(){
timer = $timeout(function () {
$scope.show = false;
}, 2000);
};
});