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

Question

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

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

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 的副本。事件绑定(bind)不会被复制。除了直接停止使用 bootstrap 的 $.popover 并开始使用 bootstrap-ui 或类似的东西之外，没有什么可做的。