“扩展”Angular UI Bootstrap Popover

Question

(我对AngularJS还不太熟悉)

我想创建一个指令，当用户单击放置该指令的元素时，它会触发Bootstrap Popover。To popover将在我的指令中生成HTML内容，并且此HTML中的元素将具有ng-click指令。

我“简单的jQuery”它会简单的

element.popover({
  content: myGeneratedContent
})
.popover('show');

// some code to attach events to the content

但是我真的不知道如何使用Angular UI来实现这一点。有什么线索吗？

谢谢

--

我想做的是一个用于https://github.com/mistic100/Angular-Smilies的按钮，它显示所有可用的表情符号，并在单击时，将相应的快捷代码添加到绑定的模型中。

Answer 1

看起来我还不够清楚，我的问题还不是在popover bu中添加HTML来根据我自己的指令创建popover。

这是一种方法：

.directive('myDirective', function() {
    return {
        restrict: 'A',
        template: '<span popover="content" popover-title="title"></span>',
        link: function($scope) {
            $scope.content = '.....';
            $scope.title = '.....';
        }
    };
})

关于超文本标记语言的内容，Chi给出了一个还不适用于官方版本的解决方案(tough on a fork https://github.com/jbruni/bootstrap-bower-jbruni)

aet版本也适用于当前版本

Answer 2

ui-bootstrap文档非常好用。然而，你说你想把html放在弹出窗口中。ui-bootstrap弹出窗口不支持这一点。我们已经在项目中的单独模块中添加了一些“额外的”popover东西，也许你也可以尝试这样的东西。

.directive( 'popoverHtmlPopup', [ function() {
    return {
        restrict: 'EA',
        replace: true,
        scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
        templateUrl: 'template/popover/popover-html.html'
    };
}])
.directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
    return $tooltip( 'popoverHtml', 'popover', 'click' );
}])

当然，您也需要模板：

angular.module("template/popover/popover-html.html", []).run(["$templateCache",     function($templateCache) {
    $templateCache.put("template/popover/popover-html.html",
            "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
            "  <div class=\"arrow\"></div>\n" +
            "\n" +
            "  <div class=\"popover-inner\">\n" +
            "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
            "      <div class=\"popover-content\" ng-bind-html=\"content\">    </div>\n" +
            "  </div>\n" +
            "</div>\n" +
            "");
}]);

然后像这样使用它：

<i title="View More Info" class="icon-info-sign"
       data-popover-html="varWithHtml"
       data-popover-title="More Info">
</i>

Answer 3

ui-bootstrap popover支持HTML模板，可以包含ng-click。

将默认模板替换为属性

popover-template="nameOfYourTemplate.html"