javascript - ng-click $event = 未定义

Question

我正在尝试使用 angularjs 和 twitter bootstrap 使用自定义 html 创建一个弹出窗口。由于这个功能尚未在 Angular-UI 中实现，因此我在 Angular 指令中使用了 Bootstrap 方法。

我编译指令内部的模板并将编译的元素附加为弹出窗口的内容。

它工作正常，但是当 ng-click 触发时，回调内部的 $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;
            });                                
        }
    }
 });

JsFiddle:http://jsfiddle.net/nq5Lnvd8/

我做错了什么以及如何解决？

Answer 1

由于指令“testD”实例化了自己的作用域，因此您无法在主 Controller 中编写测试函数。相反，您可以按照以下方式进行操作。

第一种方法:

在指令 Controller 中编写测试函数，如下所示:

  controller:function($scope){

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

    },

第二种方式:

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

 link: function(scope, element, attrs) {


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

然后就可以按照要求获取事件了。

您可以关注更新后的 fiddle 以获取更多详细信息:

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