Question

我尝试使用angularjs和twitter bootstrap创建一个带有自定义html的popover。由于此函数尚未在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;
    });
}

我遇到的问题是模板已正确添加到页面中，并且popover工作正常。但是编译模板中的ng-click方法根本没有被触发。

我做错了什么，我该怎么做？

Answer 1

$.popover在content配置属性中为您提供HTML的副本。不复制事件绑定。除了直接停止使用bootstrap $.popover并开始使用bootstrap-ui或类似内容之外，无所事事。

Answer 2

它在UI Bootstrap。它是Angular UI的子集

有关更多信息，在UI引导程序中，popover使用$ tooltip provider。

因此您可以使用自定义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>

ng-click不会在编译模板中触发

2 个答案: