"扩展"Angular UI Bootstrap Popover

Question

(我是AngularJS的新手)

我想创建一个指令,当用户单击放置指令的元素时触发Bootstrap 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

ui-bootstrap文档非常好.但是,你说你想把html放在你的popover中.ui-bootstrap popover不支持.我们在项目的单独模块中添加了一些"额外"的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>