Question

我正在尝试创建一个带有angularjs和twitter bootstrap的自定义html的popover。由于此函数尚未在angular-ui中实现，因此我在angular指令中使用了bootstrap方法。

我在指令中编译模板并将编译的元素作为popover的内容附加。

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

自指令＆＃34; testD＆＃34;实例化自己的范围，您无法在主控制器中编写测试功能。相反，你可以像以下方式那样做。

第一种方式：

将测试函数写入指令控制器，如下所示：

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

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

ng-click $ event = undefined

2 个答案: