Как остановить событие ng-click и запустить его позже с помощью другой пользовательской директивы - PullRequest
Новая
       17

Как остановить событие ng-click и запустить его позже с помощью другой пользовательской директивы

0 голосов
/ 20 апреля 2019

Мне нужно анимировать каждый клик на сайте.Так что я создал для этого очерк.Но не все события работают нормально, например, если это ui-sref или ng-click событие, которое изменяет состояние или открывает модальное окно, анимация не может успеть.

Я пытаюсь поймать щелчоксобытие и запустить его позже.Как остановить это, я знаю, но как запустить его позже, я не знаю, кроме element.triggerHandler('click'), но он снова вызывает событие click, которое я останавливаю.

В ngLick может быть функция или условие.Если вы думаете, я пытаюсь получить $state.go. 

.directive('clickEffect', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

          var md = new MobileDetect(window.navigator.userAgent);

          if (md.mobile()) {

            element[0].addEventListener('click', function (evt) {
              evt.preventDefault();
              evt.stopPropagation();
            }, true);

            var staticClass = element.attr('ce-static-class') || 'cbutton cbutton--effect-jelena';
            var animationClass = element.attr('ce-animation-class') || 'cbutton--click';
            var animationName = element.attr('ce-animation-name') || 'anim-effect-jelena';

            var onAnimationEnd = function(event) {
              if (event.animationName === animationName) {
                element.removeClass(animationClass);
                // element.triggerHandler('click');
              }
            };

            element.addClass(staticClass);

            element.on('mousedown', function () {
              element.addClass(animationClass);
            });

            element.on('animationend', onAnimationEnd);
          }
        }
    };
})

<a ng-click="isMobileMenuOpened = {visible: true}"></a>

1 Ответ

0 голосов
/ 21 апреля 2019

Остановите событие, запустите функцию анимации щелчка, затем сгенерируйте новое пользовательское событие, например: rootScope.$broadcast(clickAnimationFinished, data).

Затем, в других ваших пользовательских директивах, вы просто подписываетесь: scope.$on('clickAnimationFinished', codeThatWasPreviouslyRunningOnClicks());

Вы можете улучшить это, создав собственную директиву и заменив ng-click.

...