在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);
      });
    }
  };
});

这里的人物.