ng-click 不会在已编译的模板内触发

Question

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

所以我创建了包含此类代码的指令：

link: function(scope, element, attrs) {
  var templateData = 
    "<button class='btn btn-default btn-sm cancel' ng-click='closePopover($event)'>Cancel</button>";

  var compliedData = $compile(templateData)(scope);
  angular.element(element).find('a')
    .popover({html: true,
              content: compliedData})
    .on('click', function(e) {
      e.preventDefault();
      return true;
    });
}

我遇到的问题是模板已正确添加到页面中，并且弹出框效果很好。但是编译模板中的ng-click 方法根本没有触发。

我做错了什么，我该如何做对？

Answer 1

$.popover 对您在content 配置属性中提供的 HTML 进行复制。不复制事件绑定。除了直接停止使用 bootstrap 的 $.popover 并开始使用 bootstrap-ui 或类似的东西外，别无他法。

Answer 2

它位于UI Bootstrap。它是 Angular UI 的一个子集

有关详细信息，在 UI 引导程序中，popover 使用 $tooltip 提供程序。

因此您可以毫无问题地使用自定义 html。这正是 popover 所做的。

这是工作的plunker

你需要有以下2条指令

 .directive('xngPopover', ['$tooltip',
function($tooltip) {
  return $tooltip('xngPopover', 'popover', 'click');
}

]) .directive('xngPopoverPopup', [

function() {
  return {
    replace: true,
    scope: {
      title: '@',
      content: '@',
      animation: '@',
      isOpen: '='
    },
    templateUrl: 'tmp.html',
    controller: function($scope) {
      $scope.Hide = function() {
        $scope.isOpen = false;
      };
    }
  };
}

]);

触发器是这样的

 <span class='btn btn-success' xng-popover='test' popover-placement="bottom">test</span>