2

我从所见即所得编辑器的输出中将 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或类似的东西吗？

4

2 回答 2

5

是的，由于您尝试呈现的标记包含指令，因此您需要编译它以便它们由 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在这里。

于 2013-09-12T05:33:01.290 回答
1 
Do I have to compile the html or something like that?

是的，您需要编译 HTML，因为 Angular 只会将以下内容视为简单的 html

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

检查下面是 $compile 的文档

$complie 文档

于 2013-09-12T05:13:36.827 回答