Как создать пользовательскую директиву события, у которой есть $ event как ng events

Question

У меня есть директива AngularJS, подобная этой:

(function () {
    'use strict';
    // better click that ingore drag
    angular
        .module('module')
        .directive('exClick', exClick);

    exClick.$inject = [];
    function exClick() {
        return {
            restrict: 'A',
            scope: {
              exClick: '&'
            },
            link: function ($scope, $element) {
                var isDragging = false;
                function mousemove() {
                    isDragging = true;
                    $(window).off('mousemove', mousemove);
                }
                var timer;
                $element.mousedown(function() {
                    isDragging = false;
                    // there is wierd issue where move is triggerd just
                    // after mousedown even without moving the cursor
                    timer = setTimeout(function() {
                        $(window).mousemove(mousemove);
                    }, 100);
                }).mouseup(function(e) {
                    var wasDragging = isDragging;
                    isDragging = false;
                    clearTimeout(timer);
                    $(window).off('mousemove', mousemove);
                    if (!wasDragging) {
                        $scope.$apply($scope.exClick);
                    }
                });

                $scope.$on('$destroy', function() {
                    $(window).off('mousemove', mousemove);
                    $element.off('mousedown mouseup');
                });
            }
        }
    }
})();

, и я хочу использовать как обычное событие ng. У меня есть ng-щелчок по строке таблицы и по элементам управления строкой, у меня есть ng-click="$event.stopPropagation()".Я заменил строку на ex-click и хочу использовать ex-click="$event.stopPropagation()".Я могу использовать ng-mouseup, чтобы предотвратить событие, но я хочу знать, как сделать так, чтобы мое пользовательское событие действовало так же, как и собственное событие ng.

Я пробовал:

$scope.exClick({$event: e});

и

$scope.$event = e;
$scope.$apply();
$scope.exClick();

Answer 1

В исходном коде ngClick является обычной директивой AngularJS (она добавляется по-разному, но имеет одинаковую компиляцию и ссылку, поэтому она должна работать одинаково).

И дляссылка здесь - копия кода:

forEach(
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
  function(eventName) {
    var directiveName = directiveNormalize('ng-' + eventName);
    ngEventDirectives[directiveName] = ['$parse', '$rootScope', '$exceptionHandler', function($parse, $rootScope, $exceptionHandler) {
      return createEventDirective($parse, $rootScope, $exceptionHandler, directiveName, eventName, forceAsyncEvents[eventName]);
    }];
  }
);

function createEventDirective($parse, $rootScope, $exceptionHandler, directiveName, eventName, forceAsync) {
  return {
    restrict: 'A',
    compile: function($element, attr) {
      // NOTE:
      // We expose the powerful `$event` object on the scope that provides access to the Window,
      // etc. This is OK, because expressions are not sandboxed any more (and the expression
      // sandbox was never meant to be a security feature anyway).
      var fn = $parse(attr[directiveName]);
      return function ngEventHandler(scope, element) {
        element.on(eventName, function(event) {
          var callback = function() {
            fn(scope, {$event: event});
          };

          if (!$rootScope.$$phase) {
            scope.$apply(callback);
          } else if (forceAsync) {
            scope.$evalAsync(callback);
          } else {
            try {
              callback();
            } catch (error) {
              $exceptionHandler(error);
            }
          }
        });
      };
    }
  };
}