在我的控制器中,在点击事件中,我向页面添加了一个指令,该指令将能够调用controllerFunc
$scope.addDirective = function(e, instance){
$scope.instance = instance;
$(e.currentTarget.parentElement).append($compile('<my-directive myfunc="controllerFunc($event)" mydata={{instance}}/>')($scope));
}
在我的指令中,我进行了设置,以便在click事件(通过myfunc:&amp;)上调用controllerFunc,并尝试通过$event
传递click事件
app.directive('myDirective',function(){
return {
restrict: 'AE',
scope: {
mydata: '@',
myfunc: "&"
},
template: '<div class="row"><div class="col-4" ng-click="myfunc($event)"></div></div>',
link: function(scope, elem, attrs){
//ommitted
}
}
}
当我点击相关的div时,控制器会调用controllerFunc
,但事件被称为undefined
。
$scope.controllerFunc = function(e){
//called on the click event but e is undefined
}
在这种情况下,有没有办法用ng-click
传递事件(即我用ng-click事件将模板添加到dom中?看起来它应该可以工作(因为点击事件)触发功能)但controllerFunc
答案 0 :(得分:11)
在控制器功能内部,请注意参数的名称
'<my-directive myfunc="controllerFunc($event)" mydata={{instance}}/>')($scope));
它当前是“$ event”,这不是一个使用$ event关键字的函数,它只是一个有参数的函数,你必须提供它。为清晰起见,我会将$ event更改为event。
现在,在你完成之后,你可以转到你的指令,并在你的指令的模板中,你设置ng-click参数就像这样
template: '<div class="row"><div class="col-4" ng-click="myfunc($event)"></div></div>',
ng-click将调用&amp;函数,但为了将它绑定到正确的参数,你必须使用稍微不同的语法,并匹配它应该匹配的参数的名称,所以
ng-click="myfunc($event)"
成为
ng-click="myfunc({event: $event})"
假设您已将原始$ event更改为event。
答案 1 :(得分:2)
我不知道div元素,但是如果你正在对anchor()元素执行ng-click,则可能遇到了这个问题。要防止它,你应该使用event.preventDefault()设置它的onclick属性lick this:
<a href="#" onclick="event.preventDefault()" ng-click="Cancel($event)">Cancel</a>
这将阻止在ng-click有机会执行之前导航到链接。
谢谢。