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

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

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


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

每次都必须显式地传递 $event,这有点烦人。是否有可能设置 ng-click以某种方式将其默认传递给函数?

152765 次浏览

看一下 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-click表达式的 去世了。这是由 $parse 服务完成的,该服务不允许目标范围 流入的参数,这意味着 答案是否定的,除了通过回调参数之外,您不能以任何其他方式访问 $event对象。

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

其中的关键部分是我定义了一个“ clickable”元素(如果你需要旧的 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”。

希望能帮上忙!

我不建议这样做,但是您可以覆盖 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;
});
});

然后像这样传递函数:

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

而不是:

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

JsBin : < a href = “ http://jsBin.com/piaffeke/3/edit”rel = “ nofollow”> http://jsBin.com/piwafeke/3/edit

就像我说的,我建议 没有这样做,但这是一个概念的证明,向你展示,是的-你实际上可以覆盖/扩展/增强内置的角度行为,以满足你的需要。而不必深入挖掘原始实现。

请谨慎使用它,如果你决定走这条路(这是很有趣的)。

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

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

然后,jQuery.Event被传递给回调:

enter image description here