Question

我试图在弹出式内容中包含HTML。

下一版本可以使用特定指令，但我需要使用0.12.1版本的angular-bootstrap，因为我使用的是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;";

但显然它不起作用，因为此版本中的pop文件尚未支持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＆amp; Angular 1.2.x

1 个答案: