ng-click $event = 未定义答案

【问题标题】：ng-click $event = undefinedng-click $event = 未定义
【发布时间】：2015-01-26 12:52:31
【问题描述】：

我正在尝试使用带有 angularjs 和 twitter 引导程序的自定义 html 创建一个弹出框。由于此功能尚未在 angular-ui 中实现，因此我在 angular 指令中使用引导方法。

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

它工作正常，但是当触发 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/

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

【问题讨论】：

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

由于指令“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/

【讨论】：

我使用了你的方法，它有效，但现在关闭回调只触发一次。所以，我打开弹出窗口，用“关闭按钮”打开它，然后再次打开它，之后我无法关闭它。并且 ng-click() 方法不会被触发。如何找出问题所在？
你能提供同样的 jsFiddle 以便我看一下吗？
是的：jsfiddle.net/vc4sd1fe 这里是新问题：stackoverflow.com/questions/28153768/…

【解决方案2】：

有趣。当您在指令的范围上定义 test 时，它会注册事件 - 请参阅此小提琴：

http://jsfiddle.net/h32kgs69/

添加此功能：

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

因为您使用表达式绑定进行测试，并且没有将事件传递到该绑定中，所以当它到达外部作用域中的函数时，它就会丢失。尝试使用 '=' 绑定而不是 '&'。

【讨论】：