Question

（我是AngularJS的新手）

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

我＆＃34;简单的jQuery＆＃34;它只是

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不支持。我们增加了一些额外的＆＃34;在我们项目的单独模块中弹出东西，也许你也可以尝试这样的东西。

.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 2

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

使用属性

替换默认模板

popover-template="nameOfYourTemplate.html"

Answer 3

似乎我不够清楚，我的问题还没有（还）在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 = '.....';
        }
    };
})

关于HTML内容，Chi Row提供了一个解决方案，该解决方案尚未适用于官方版本（在分支https://github.com/jbruni/bootstrap-bower-jbruni上很难提供）

aet版本也适用于当前版本

“扩展”Angular UI Bootstrap Popover

3 个答案: