将$ event传递给ng-click,但事件未定义

Question

在我的控制器中,在单击事件时,我向页面添加一个指令,该指令将能够调用 controllerFunc

$scope.addDirective = function(e, instance){
   $scope.instance = instance;
   $(e.currentTarget.parentElement).append($compile('<my-directive myfunc="controllerFunc($event)" mydata={{instance}}/>')($scope));
}

在我的指令中,我进行了设置,以便在click事件(通过myfunc:&)上调用controllerFunc,并尝试通过click事件传递 $event

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添加了一个模板？看起来它应该可以工作(因为click事件会触发函数)但是没有事件在controllerFunc

Answer 1

在控制器函数内部,请注意参数的名称

'<my-directive myfunc="controllerFunc($event)" mydata={{instance}}/>')($scope));

它目前是"$ event",这不是一个使用$ event关键字的函数,它只是一个有参数的函数,你必须提供它.为清楚起见,我会将$ event更改为event.

现在,在你完成之后,你可以转到你的指令,在你的指令的模板中,你正在设置ng-click param,就像这样

template: '<div class="row"><div class="col-4" ng-click="myfunc($event)"></div></div>',

ng-click将调用&函数,但是为了将它绑定到正确的参数,你必须使用稍微不同的语法,并匹配它应该匹配的param的名称,所以

ng-click="myfunc($event)"

变

ng-click="myfunc({event: $event})"

假设您已将原始$事件更改为事件.