javascript - 앵귤러5 - 앵귤러6




angularjs에서 요소를 가리 키기 위해 지연을 어떻게 추가합니까? (5)

나는 한 가지 요소를 가지고있다 :

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

그리고 hover 이벤트에 대해 500ms 지연을 설정할 수 있기를 원합니다.

나는이 질문에 대한 답변을 이미 가지고 있지만, 8 시간 더 게시 할 수는 없다. 나는 돌아올거야!


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>

데모 플 렁커


나는 이것에 대한 간단한 지시문을 썼다.

(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


이 예제는 AngularJS의 문서보다 $ timeout이 훨씬 더 잘 작동하는 것을 이해하는 데 도움이되었으므로이 질문에 감사드립니다. 그러나 정답에 대해 작업을 약간 개선하고 여기에서 공유하려고했습니다.

타이머라고 불리는 빈 변수를 만들 필요가 없습니다. 사실 이렇게하는 것은 필요가없는 메모리를 사용하는 것입니다. 실제로는 단일 작업을 처리하는 변수와 두 개의 함수가 있습니다.

그래서 저는 'bool'이라는 부울 인수를 허용하는 'toggleHover'라는 단일 함수를 작성했습니다. 그런 다음 if / else 문이 실행해야하는 $ timeout 함수를 결정합니다.

컨트롤러 안의 각도

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


이미 대부분 언급 한 것과 마찬가지로 mouseenter 이벤트에 타이머를 추가했습니다.

// create the timer variable
var timer;

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

내가 가지고있는 문제는 아이템을 지나서 마우스 커서를 치면 팝업이 0.5 초 후에도 발생한다는 것입니다. 우연히 팝업이 발생하지 않고 항목을 스크롤 할 수 있기를 원합니다.

변수에 타임 아웃을 넣으면 타임 아웃을 취소 할 수있었습니다. 사용자가 우연히 팝업을 트리거하지 않도록하기 위해 마우스 나가기 이벤트에서 수행합니다.

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

누군가가 행동에서 그것을보고 싶어하는 경우에 여기에 바이올린입니다 : jsfiddle


$ timeout을 사용하십시오 :

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

의존성으로 추가하는 것을 잊지 마십시오.

그리고 좀 더 delayedMouseEnter 하고 싶다면 delayedMouseEnter 와 같은 지시문을 만들어 지연을 포함시켜 대신 사용할 수 있습니다.





hoverintent