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

在我的指令中，我设置它以便在点击事件上调用 controllerFunc（通过 myfunc: &），然后我尝试通过 $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 参数

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

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

ng-click="myfunc($event)"

变成

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

假设您已将原始 $event 更改为 event。

Answer 2

我不知道 div 元素，但如果您对锚 () 元素执行 ng-click，您可能会遇到此问题。为了防止它，您应该使用 event.preventDefault() 设置它的 onclick 属性 舔这个：

<a href="#" onclick="event.preventDefault()" ng-click="Cancel($event)">Cancel</a>

这将阻止在 ng-click 有机会执行之前导航到链接。

谢谢。