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模块的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指令

1 个答案: