ng-单击$event = 未定义

ng-click $event = undefined

本文关键字：未定义 event 单击 ng-      更新时间：2023-09-26

我正在尝试使用angularjs和twitter引导程序创建自定义html的弹出窗口。由于这个函数还没有在 angular-ui 中实现，所以我在 angular 指令中使用引导方法。

我在指令中编译模板，并将编译后的元素附加为弹出框的内容。

它工作正常，但是当ng单击触发时，回调内部$event未定义。我需要这个$event（通过$event.target）来获取元素，我将隐藏和隐藏它。

代码很简单：

mymodal.controller('MainCtrl', function ($scope) {
    $scope.test = function(e) {
                console.log('test');
            };
});
mymodal.directive('testD', function ($compile) {
    return {
        restrict: 'EAC',
        template: "<a href='#' id='pop-over-link'>Show pop-over</a>",
        scope: {test: '&'},
        link: function(scope, element, attrs) {
          var templateData = 
            "<button class='btn btn-default btn-sm cancel' ng-click='test($event)'>Cancel</button>";
          var compliedData = $compile(templateData)(scope);
          $(element)
            .popover({html: true,
                      content: compliedData
                     })
            .on('click', function(e) {
              e.preventDefault();
              return true;
            });                                
        }
    }
 });

小提琴：http://jsfiddle.net/nq5Lnvd8/

我

做错了什么，我该如何解决？

由于指令"testD"实例化了自己的作用域，因此您无法在主控制器中编写测试函数。相反，您可以通过以下方式执行此操作。

第一种方式：

在指令控制器中编写测试函数，如下所示：

  controller:function($scope){
        $scope.test = function(e) {
            console.log(e);
        };
    },

第二种方式：

在指令链接中编写测试函数：

 link: function(scope, element, attrs) {

         scope.test = function(e) {
            console.log(e);
        };

然后，您可以根据需要获取事件。

您可以跟进更新的小提琴以获取更多详细信息：

http://jsfiddle.net/Satbir/nq5Lnvd8/6/

有趣。当你在指令的作用域上定义测试时，它会注册事件 - 参见这个小提琴：

http://jsfiddle.net/h32kgs69/

添加此函数：

    link: function(scope, element, attrs) {
        scope.test = function(e) {
            console.log(e);
        }

由于使用表达式绑定进行测试，并且不将事件传递到该绑定中，因此当它到达外部作用域中的函数时，该事件将丢失。尝试使用"="绑定而不是"&"。

相关文章：