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>

Demo 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，其中包含延迟并使用它。

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>

这是一个掠夺者：http://plnkr.co/edit/iuv604Mk0ii8yklpp6yR?p=preview

Answer 6

感谢您提出这个问题，因为这个例子帮助我理解$ timeout的工作方式比AngularJS的文档更好。但是，我确实在正确的答案上稍微改进了操作，并想在这里分享。

您永远不必创建一个名为timer的空var。事实上，这样做会耗尽你不必要的内存。您有一个变量和两个函数来处理实际上是单个操作的内容。

所以，我所做的是创建一个名为＆＃39; toggleHover＆＃39;接受名为＆＃39; bool＆＃39;的布尔参数。然后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 );

                    }
                );

如何在angularjs中悬停元素添加延迟？

7 个答案:

AngularJS In Controller

HTML / VIEW

实施例