如何使用angular在html中绑定html标签

Question

HTML

<div><code><pre>{{out_html}}</pre></code></div>

AngularJS

$scope.out_html = "<p style='color:red'>John Smith</p>";

我想在html浏览器中显示红色的'p'标签名称"John smith"。但这里显示的是html代码，而不是红色`JohnSmith。

plunker

Answer 1

您可以将其绑定为：

<div>
<code>
<pre ng-bind-html="out_html" style="color:red;"></pre>
</code>
</div>

对于"颜色"，可以设置<pre>元素的样式。

ng-bind-html指令是一种将内容绑定到html元素的安全方式。有关更多详细信息：https://www.w3schools.com/angular/ng_ng-bind-html.asp

Answer 2

您可以使用ng-bind-html指令在angular js、中绑定html

这是你的工作plunker

<code>
<pre>
<p ng-bind-html="out_html"></p>
</pre>
</code>

Answer 3

是的，Angular默认情况下会清理绑定的表达式。要防止使用ngBindHtml，请执行以下操作：https://docs.angularjs.org/api/ng/directive/ngBindHtml.

但是，如果这只是一个样式问题，为什么不使用ngClass呢？https://docs.angularjs.org/api/ng/directive/ngClass

Answer 4

您可以将p标记值和p颜色分开，只需添加另一个变量/范围

HTML

<div><code><pre><p style='color:{{color}}'>{{value}}</p></pre></code></div>

AngularJS

$scope.value = "John Smith";
$scope.color = "red";

Answer 5

这是angularjs的安全预防措施。这是为了确保不必要的行为。所以Angular总是会为你逃离标签。您可以使用ng-bind-html，但非常重要的是，您首先"允许"将此字符串解释为使用trustAsHtml

angular.module('test', []).controller('ctrl', function($scope, $sce) {
$scope.out_html = "<p style='color:red'>John Smith</p>";
$scope.trust = $sce.trustAsHtml;
});
<span ng-bind-html="trust(out_html)"></span></div>

这也是这个问题的另一个线索：https://stackoverflow.com/a/28444859/8196542