将 HTML 标记插入 Angular 指令

Question

我想使用 Angular 指令来包装 Bootstrap 面板。不过，如果我想在面板正文中使用 HTML 标签，我运行遇到了问题。

鉴于：

$scope.panel = {
  title: "Title",
  body: "This is some <strong>cool</strong> text!"
};

我希望我的面板呈现如下所示的主体：

这是一些很酷的文字！

但它呈现为：

This is some <strong>cool</strong> text!

是否可以达到我想要的效果？

编辑：

指令

aModule.directive('myPanel', function() {
  return {
    restrict: 'E',
    scope: { panel: '=' },
    templateUrl: './tmp/my-panel.html'
  };
});

模板：

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">{{panel.title}}</h3>
  </div>
  <div class="panel-body">
    <p>{{panel.body}}</p>
  </div>
</div>

正在使用：

<my-panel panel="panel"></my-panel>

使用下面的答案：

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">{{panel.title}}</h3>
  </div>
  <div class="panel-body">
    <p ng-bind-html="panel.body"></p>
  </div>
</div>

Answer 1

要将 HTML 绑定到 Angular 变量，您必须使用 $sce module's trustAsHtml 函数来验证内容。

$scope.panel = {
  title: "Title",
  body: $sce.trustAsHtml("This is some <strong>cool</strong> text!");
};

你还需要使用ng-bind-html:

<p ng-bind-html="panel['body']"></p>

您不再需要 {{ panel.body }}，因为 ng-bind-html 指令将计算表达式并以安全的方式将结果 HTML 插入到所需的元素中。

将 HTML 标记插入 Angular 指令

Insert an HTML Tag Into an Angular Directive

html

tags

dom

directive

angularjs