Автоматически передать $ событие с ng-click?

Я знаю, что могу получить доступ к событию click от ng-click если я передам в $event объект вот так:

<button ng-click="myFunction($event)">Give me the $event</button>

<script>
  function myFunction (event) {
    typeof event !== "undefined" // true
  }
</script>

Это немного раздражает, чтобы передать $event явно каждый раз. Можно ли установить ng-click чтобы как-то передать его в функцию по умолчанию?

4 64
javascript angularjs angularjs-directive javascript-events angularjs-ng-click

4 ответа:

взгляните на ng-click директива источник:

...
compile: function($element, attr) {
  var fn = $parse(attr[directiveName]);
  return function(scope, element, attr) {
    element.on(lowercase(name), function(event) {
      scope.$apply(function() {
        fn(scope, {$event:event});
      });
    });
  };
}

это показывает как

60

добавить $event до ng-click, например:

<button type="button" ng-click="saveOffer($event)" accesskey="S"></button>

тут jQuery.Event был передан обратный вызов:

enter image description here

31

как говорили другие, вы не можете на самом деле строго делать то, что вы просите. Тем не менее, все инструменты, доступные для угловой структуры, фактически доступны и вам! Это означает, что вы можете написать свои собственные элементы и предоставить эту функцию самостоятельно. Я написал один из них в качестве примера, который вы можете увидеть на следующем plunkr (http://plnkr.co/edit/Qrz9zFjc7Ud6KQoNMEI1).

ключевые части этого являются то, что я определяю "кликабельный" элемент (не делайте этого, если вам нужна более старая поддержка IE). В коде, который выглядит так:

<clickable>
  <h1>Hello World!</h1>
</clickable>

затем я определил директиву, чтобы взять этот кликабельный элемент и превратить его в то, что я хочу (что-то, что автоматически настраивает мое событие click):

app.directive('clickable', function() {
    return {
        transclude: true,
        restrict: 'E',
        template: '<div ng-transclude ng-click="handleClick($event)"></div>'
    };
});

наконец, в моем контроллере у меня есть событие click ready to go:

$scope.handleClick = function($event) {
    var i = 0;
};

Теперь стоит отметить, что этот жесткий кодирует имя метода, который обрабатывает событие click. Если вы хотите устранить это, вы должны быть возможность предоставить директиву с именем вашего обработчика кликов и "tada" - у вас есть элемент (или атрибут), который вы можете использовать и никогда не придется вводить" $event " снова.

надеюсь, что это поможет!

11

Я бы не рекомендовал делать это, но вы можете переопределить

2