HTML 在弹出窗口中 angular-bootstrap 0.12.1 & Angular 1.2.x

Question

我正在尝试将 HTML 放入弹出框内容中。

可以在下一个版本中使用特定指令，但我需要使用 angular-bootstrap 的 0.12.1 版本，因为我使用的是 Angular 1.2。 28

知道如何实现吗？

我使用的是一个简单的案例：

<button popover="{{ testData }}"
        popover-placement="bottom" 
        class="btn btn-icon btn-icon-sm btn-icon-default">
   <i class="fa fa-search"></i>
</button>

在 js 中：

$scope.testData = "<b>Bold data</b>" + " Normal data " + " &lt;b&gt;Encoded bold data&lt;/b&gt;";

但显然它不起作用，因为在此版本中 HTML 还不支持作为弹出窗口内容。

Answer 1

好的，受一个plunker的启发，可以通过添加以下指令来实现：

.directive("popoverHtmlUnsafePopup", function () {
    return {
        restrict: "EA",
        replace: true,
        scope: {
            title: "@",
            content: "@",
            placement: "@",
            animation: "&",
            isOpen: "&"
        },
        templateUrl: "template/popover/popover-html-unsafe-popup.html"
    };
})

.directive("popoverHtmlUnsafe", ["$tooltip", function ($tooltip) {
    return $tooltip("popoverHtmlUnsafe", "popover", "click");
}])

使用模板模块：

angular.module("template/popover/popover-html-unsafe-popup.html", []).run(["$templateCache", function ($templateCache) {
$templateCache.put("template/popover/popover-html-unsafe-popup.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\" bind-html-unsafe=\"content\"></div>\n" +
    "  </div>\n" +
    "</div>\n" +
    "");
 }]);

HTML 在弹出窗口中 angular-bootstrap 0.12.1 & Angular 1.2.x

HTML in popover with angular-bootstrap 0.12.1 & Angular 1.2.x

html

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap