用ng-click自动传递$事件？

我知道我可以通过ng-click来访问点击事件，如果我传递$event对象，如下所示：

 <button ng-click="myFunction($event)">Give me the $event</button> function myFunction (event) { typeof event !== "undefined" // true } 

每次显式传递$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作为参数的名称将event对象传递给ng-clickexpression式。 这是通过$ parse服务完成的，该服务不允许参数stream入目标范围，这意味着答案是否定的 ，您不能通过callback参数以任何其他方式访问$event对象。

Answer 2

添加一个$事件到ng-click，例如： <button type="button" ng-click="saveOffer($event)" accesskey="S"></button>

然后jQuery.Event被传递给callback：

Answer 3

正如其他人所说，你实际上不能严格按照你的要求去做。 也就是说，angular框架可用的所有工具实际上也可供您使用！ 这意味着你可以自己编写自己的元素并自己提供这个function。 我写了一个这样的例子，你可以在下面的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”。

希望有所帮助！

Answer 4

我不会推荐这样做，但是你可以重载ngClick指令去做你正在寻找的东西。 那不是说你应该

考虑到原始实施：

 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}); }); }); }; } 

---

我们可以这样做来覆盖它：

 // Go into your config block and inject $provide. app.config(function ($provide) { // Decorate the ngClick directive. $provide.decorator('ngClickDirective', function ($delegate) { // Grab the actual directive from the returned $delegate array. var directive = $delegate[0]; // Stow away the original compile function of the ngClick directive. var origCompile = directive.compile; // Overwrite the original compile function. directive.compile = function (el, attrs) { // Apply the original compile function. origCompile.apply(this, arguments); // Return a new link function with our custom behaviour. return function (scope, el, attrs) { // Get the name of the passed in function. var fn = attrs.ngClick; el.on('click', function (event) { scope.$apply(function () { // If no property on scope matches the passed in fn, return. if (!scope[fn]) { return; } // Throw an error if we misused the new ngClick directive. if (typeof scope[fn] !== 'function') { throw new Error('Property ' + fn + ' is not a function on ' + scope); } // Call the passed in function with the event. scope[fn].call(null, event); }); }); }; }; return $delegate; }); }); 

那么你会传递你的function，如下所示：

 <div ng-click="func"></div> 

而不是：

 <div ng-click="func()"></div> 

---

jsBin ： http : //jsbin.com/piwafeke/3/edit

就像我说的那样，我不会推荐这样做，但是这是一个概念certificate，是的 – 你可以覆盖/扩展/增加内在的angular度行为来适应你的需求。 无需深入挖掘原始实施。

请小心使用，如果你决定走这条路（虽然这很有趣）。