使用指令在Angular中渲染HTML

Question

我從WYSIWYG編輯器的輸出將html數據存儲在數據庫中。 html還存儲一些指令的html。 其中之一是ui-bootstrap工具提示：

<span tooltip-placement="left" tooltip="On the Left!">Tooltip text here</span>

我可以通過使用綁定使其他任何html元素起作用：

<div ng-bind-html-unsafe="html.content"></div>

但是帶有指令引用的html不會與實際指令交互。

我如何才能使該指令起作用？

我必須編譯html之類的東西嗎？

Answer 1

是的，由於您要渲染的標記包含指令，因此您需要對其進行編譯，以便由Angular處理它們。

您可以創建一個為您執行此操作的指令：

app.directive('htmlRender', function($compile) {
  return {
    restrict: 'E',
    scope: { html: '@' },
    link: function(scope, element) {
      scope.$watch('html', function(value) {
        if (!value) return;

        var markup = $compile(value)(scope);
        element.append(markup);
      });
    }
  };
});

在這里插一下 。

Answer 2

Do I have to compile the html or something like that?

是的，您需要編寫HTML，因為Angular僅將以下內容視為簡單的html

<div ng-bind-html-unsafe="html.content"></div>

檢查以下是$ compile的文檔

$符合文件