ng-bind-html 与 {{interpolation}}

Question

这是我的问题，优点和缺点是什么？

在我的应用程序中，我使用了插值，但出现了这样的错误

{{::sport.name}} -> NHL Futures & Props

如果我使用 ng-bind-html

ng-bind-html="sport.name" -> NHL Futures & Props

在这种情况下 ng-bind-html 正在做我想做的事。但是，有什么问题吗？

有没有比那个更好的？

告诉我，我愿意接受建议。

Answer 1

ng-bind-html 在幕后使用 $element.html 设置内容（在明确信任或清理后）

{{ }}（或等效的ng-bind）使用$element.text（实际上是$element[0].textContent）设置内容。

所以，换句话说 - 第一个设置 HTML，第二个设置文本内容。这就是为什么您看到 &.

的区别

Answer 2

实际上 ng-bind 和 ng-bind-html 之间的主要区别在于用例。 ng-bind 只会显示变量的文本解释，但 ng-bind-html 会解释变量中的 html。

假设我们在您的范围内有一个变量

 $scope.myText = "<b>Hi</b>";

ng-bind 或 {{}} 会显示

 <b>Hi</b>

ng-bind-html 会显示

嗨

另一个精确度是 ng-bind-html 可以清理您的 html 以防止代码注入。

ng-bind-html vs {{interpolation}}