javascript - ejemplos - ng model ejemplo

¿Cómo agrego un retraso para colocar un elemento en angularjs?

Question

Tengo un elemento:

    <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>

Aquí está el JS:

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

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

Y quiero ser capaz de establecer un retraso de 500 ms en el evento de vuelo estacionario.

Ya tuve una respuesta a esta pregunta, pero no puedo publicarla por otras 8 horas. ¡Vuelvo enseguida!

Answer 1

Como lo que la mayoría ya mencionó aquí, agregué un temporizador al evento mouseenter.

// create the timer variable
var timer;

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

El problema que tuve fue que si estaba desplazándome más allá del elemento y el cursor del mouse lo golpeaba, la ventana emergente seguiría apareciendo medio segundo después. Quiero poder pasar un elemento sin que la ventana emergente ocurra por accidente.

Poner el tiempo de espera en una variable me permitió cancelar el tiempo de espera. Lo cual hago en un evento de mouse leave para asegurarme de que los usuarios no activen accidentalmente el menú emergente.

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

Aquí hay un violín en caso de que alguien quiera verlo en acción: jsfiddle

Answer 2

Escribí una directiva simple para esto.

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

Uso de ejemplo (sc-hover-delay es opcional):

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

Aquí hay un plunker: http://plnkr.co/edit/iuv604Mk0ii8yklpp6yR?p=preview

Answer 3

Gracias por hacer esta pregunta, ya que este ejemplo me ayudó a entender cómo funciona $ timeout mucho mejor que la documentación de AngularJS. Sin embargo, mejoré un poco la operación con la respuesta correcta y quería compartirla aquí.

Nunca tiene que crear una varilla vacía llamada temporizador. De hecho, hacerlo consume memoria que no era necesario. Usted tiene una variable y dos funciones para manejar lo que en realidad es una sola operación.

Entonces, lo que hice fue crear una sola función llamada ''toggleHover'' que acepta un argumento booleano llamado ''bool''. Luego, una instrucción if / else determina qué función $ timeout necesita ejecutar.

AngularJS en el controlador

$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 / VER

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

EJEMPLO

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

Answer 4

Hola, gran respuesta anterior. Solo quería agregar, no olvides cancelar tu temporizador si es necesario cuando pasas el mouse y todavía no se dispara o cuando destruyes la directiva.

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

                        $timeout.cancel( timer );

                    }
                );

Answer 5

Recomiendo usar transiciones CSS y angular-animate:

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 6

Use $ timeout :

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

No olvides agregarlo como una dependencia.

Y si desea jugar con eso un poco más, puede hacer su propia directiva como delayedMouseEnter que incluiría la demora y la usaría en su lugar.

Answer 7

window.setTimeout Llama a una función o ejecuta un fragmento de código después de un retraso especificado.

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

O el servicio Angular $timeout :

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