使用Directive在Angular中渲染html

Question

我将所见即所得编辑器的输出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);
      });
    }
  };
});

Plunker here。

Answer 2

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

是的，您需要编译的HTML作为角度将只考虑作为简单的html如下

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

下面是$compile的文档

$complie documenation