如何停止ng-click事件并稍后由另一个自定义指令运行它

Question

我需要为网站上的每次点击设置动画。所以我为此创造了一个derictive。但是，并非所有事件都能正常工作，例如，如果它是ui-sref或ng-click事件改变状态或打开模态窗口，动画就无法及时获得。

我正试图抓住点击事件并稍后运行它。如何阻止它，我知道，但如何tu运行它以后我不知道，除了一个element.triggerHandler('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>

Answer 1

停止事件，运行单击动画功能，然后发出新的自定义事件，如：rootScope.$broadcast(clickAnimationFinished, data).

然后，在您的其他自定义指令中，您只需订阅：scope.$on('clickAnimationFinished', codeThatWasPreviouslyRunningOnClicks());

您可以通过创建自定义指令并替换ng-click来进一步改进。