ng-click $ event =未定義

Question

我正在嘗試使用帶有angularjs和twitter引導程序的自定義html創建一個popover。 由於尚未在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/

我做錯了什么以及如何解決？

Answer 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/

Answer 2

有趣。 當您在指令范圍內定義測試時，它會注冊事件-請參見以下提示：

http://jsfiddle.net/h32kgs69/

添加此功能：

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

因為您使用表達式綁定進行測試，並且不將事件傳遞到該綁定中，所以當它到達外部范圍中的函數時，它會丟失。 嘗試使用“ =”綁定而不是“＆”。