如何在angularjs中懸停元素添加延遲？

Question

我有一個元素：

    <span ng-mouseenter="showIt()" ng-mouseleave="hideIt()">Hover Me</span>
    <div class="outerDiv" ng-show="hovering">
        <p>Some content</p>
        <div class="innerDiv">
            <p>More Content</p>
        </div>
    </div>

這是JS：

// mouseenter event
$scope.showIt = function () {
    $scope.hovering = true;
};

// mouseleave event
$scope.hideIt = function () {
    $scope.hovering = false;
};

我希望能夠在懸停事件上設置500毫秒的延遲。

我已經對這個問題有了答案，但是我再也不能發布8個小時了。 我會回來的！

Answer 1

就像大多數人已經在這里提到的一樣，我在mouseenter事件中添加了一個計時器。

// create the timer variable
var timer;

// mouseenter event
$scope.showIt = function () {
    timer = $timeout(function () {
        $scope.hovering = true;
    }, 500);
};

我遇到的問題是，如果我滾動瀏覽項目並且鼠標光標擊中它，彈出窗口仍會在半秒后發生。 我希望能夠滾動瀏覽項目，而不會偶然發生彈出窗口。

將超時置於變量中允許我取消超時。 我在鼠標離開事件上做的事情，以確保用戶不會意外觸發彈出窗口。

// mouseleave event
$scope.hideIt = function () {
    $timeout.cancel(timer);
    $scope.hovering = false;
};

如果有人想在行動中看到它，這是一個小提琴： jsfiddle

Answer 2

我建議使用CSS過渡和角度動畫：

JS

var app = angular.module('app', ['ngAnimate']);

CSS

.outerDiv.ng-hide-remove {
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all;
    transition-delay: 0.5s;
    opacity: 0;
}
.outerDiv.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

HTML

<span ng-mouseenter="hovering=true" ng-mouseleave="hovering=false">Hover Me</span>
<div class="outerDiv" ng-show="hovering">
    <p>Some content</p>
    <div class="innerDiv">
        <p>More Content</p>
    </div>
</div>

演示Plunker

Answer 3

window.setTimeout在指定的延遲后調用函數或執行代碼片段。

$scope.hideIt = function () {
    window.setTimeout(function() {
        $scope.hovering = false;
        $scope.$apply();
    }, 500);  // 500ms delay        
};

或Angular $timeout服務：

$scope.hideIt = function () {
    $timeout(function() {
        $scope.hovering = false;
    }, 500);  // 500ms delay        
};

Answer 4

使用$ timeout ：

$scope.showIt = function () {
    $timeout(function(){
        $scope.hovering = true;
    }, 500);
};

不要忘記將其添加為依賴項。

如果你delayedMouseEnter玩它，你可以制作自己的指令，如delayedMouseEnter ，包括延遲並使用它。

Answer 5

我為此寫了一個簡單的指令。

(function () {
    'use strict';
    angular
        .module('app')
        .directive('scHover', scHoverDirective);

    function scHoverDirective($timeout) {
        return {
            link: function(scope, element, attrs, modelCtrl) {
                    var inTimeout = false;
                    var hoverDelay = parseInt(attrs.scHoverDelay, 10) | 1000;

                    element.on('mouseover', function () {
                      inTimeout = true;
                      $timeout(function () {
                        if (inTimeout) {
                          scope.$eval(attrs.scHover);
                          inTimeout = false;
                        }
                      }, hoverDelay);
                    });

                    element.on('mouseleave', function () {
                      inTimeout = false;
                      scope.$apply(function () {
                        scope.$eval(attrs.scHoverEnd);
                      });
                    });
            }
        }
    }
})();

示例用法（sc-hover-delay是可選的）：

<div sc-hover='vm.title="Hovered..."' sc-hover-end='vm.title=""' sc-hover-delay="800">Hover me!  {{ vm.title }}</div>

這是一個plunker： http ：//plnkr.co/edit/iuv604Mk0ii8yklpp6yR？p = preview

Answer 6

感謝您提出這個問題，因為這個例子幫助我理解$ timeout的工作方式比AngularJS的文檔更好。 但是，我確實在正確答案上稍微改進了操作，並希望在此處分享。

您永遠不必創建一個名為timer的空var。 實際上，這樣做會耗盡您不必擁有的內存。 您有一個變量和兩個函數來處理實際上是單個操作的內容。

所以，我所做的是創建一個名為'toggleHover'的函數，它接受一個名為'bool'的布爾參數。 然后if / else語句確定您需要運行哪個$ timeout函數。

AngularJS In Controller

$scope.hovering = false; //Sets the initial state of hover

$scope.toggleHover = function (bool) {
    if (bool === true) {
        $timeout(function () {
            $scope.hovering = !$scope.hovering;
        }, 500);
    } else {
        $timeout(function() {
            $scope.hovering = !$scope.hovering;
        }, 500);
    };
}

HTML / VIEW

<span ng-mouseenter="toggleHover(true)" ng-mouseleave="toggleHover(false)">Hover Me</span>

例

http://jsfiddle.net/89RTg/12/

Answer 7

嗨，那里有很好的答案只是想添加不要忘記取消你的計時器，如果你需要在你徘徊時它仍然沒有開火或當你銷毀指令

 $timeout.cancel( timer );
 $scope.$on("$destroy",
                    function( event ) {

                        $timeout.cancel( timer );

                    }
                );