使用ng-click自动传递$ event？

Question

我知道ng-click如果我$event像这样传入对象,我可以访问click事件:

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

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

$event每次都必须明确传递,这有点烦人.ng-click默认情况下是否可以设置为以某种方式将其传递给函数？

Answer 1

看一下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});
      });
    });
  };
}

它显示了如何将event对象作为参数的名称传递给ng-click表达式$event.这是由$ parse服务完成的,它不允许参数渗透到目标作用域,这意味着答案是否定的,你不能通过$event回调参数以任何其他方式访问对象.

Answer 2

a添加$event到ng-click,例如:

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

然后jQuery.Event传递给回调:

Answer 3

正如其他人所说,你实际上不能严格按照你的要求去做.也就是说,角度框架可用的所有工具实际上也可供您使用!这意味着你实际上可以编写自己的元素并自己提供这个功能.我写了其中一个作为一个例子,你可以在下面的plunkr(http://plnkr.co/edit/Qrz9zFjc7Ud6KQoNMEI1)看到.

这个的关键部分是我定义了一个"可点击的"元素(如果你需要较旧的IE支持,不要这样做).在代码中看起来像:

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

然后我定义了一个指令来获取这个可点击元素并将其转换为我想要的东西(自动设置我的点击事件的东西):

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

最后在我的控制器中,我已准备好点击事件:

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

现在,它值得说明这个硬代码处理click事件的方法的名称.如果你想消除这种情况,你应该能够为指令提供你的点击处理程序的名称和"tada" - 你有一个你可以使用的元素(或属性),而且永远不必再次注入"$ event".

希望有所帮助!