在Angular指令中插入HTML标记

我想使用Angular指令来包装引导面板。但是，如果我想在面板主体中使用HTML标记，我遇到了一个问题

鉴于：

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

模板：

<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>

{{panel.title}}
{{panel.body}

使用中：

<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>

{{panel.title}}

要将HTML绑定到角度变量，必须使用模块的函数验证内容

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

---

您不再需要

{panel.body}

，因为

ng bind html

指令将对表达式求值，并以安全的方式将结果html插入所需元素。

绑定到变量本身不是问题，您必须使用

ng bind html

，这就是为什么要使用

$sce

@charlietfl您是对的！让我相应地更新我的答案。为了让我的观点更清楚…变量中可以有html，没有任何问题…重要的是你如何使用它

<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>

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

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