javascript - 使用 angularJS 在 ng-bind 中解析 html

Question

我遇到了 angularJs 的问题。我的应用程序从服务器请求一些数据，从服务器返回的数据中的一个值是一个 html 字符串。我像这样在我的角度模板中绑定它

<div>{{{item.location_icons}}</div>

但正如你所料，我看到的不是图标图像，而是标记基本上 div 中的东西看起来像

 "<i class='my-icon-class'/>"

这不是我想要的。

任何人都知道我可以做些什么来解析嵌入中的 html

Answer 1

你想使用ng-bind-html和ng-bind-html-unsafe用于那种目的。

示例显示在这里

Answer 2

由于 ng-bind-html-unsafe 已弃用，您可以改用此代码。

您需要在控制器中创建函数：

$scope.toTrustedHTML = function( html ){
    return $sce.trustAsHtml( html );
}

并在您的视图中使用类似的东西：

<span ng-bind-html='toTrustedHTML( myHTMLstring )'></span>

不要忘记注入 $sce：

AppObj.controller('MyController', function($scope, $sce) {
    //your code here 
});

Answer 3

更好的方法是使用$compile而不是ng-bind-html-unsafe.

请参阅：http ://docs.angularjs.org/api/ng.$compile

最后，目前，angularJS 的最后一个版本（候选版本 1.2.0）没有任何ng-bind-html-unsafe指令。所以我真的鼓励你在将来更新你的应用程序之前考虑这个选项。（ng-bind-html-unsafe可能/不会再工作了......）

http://code.angularjs.org/1.2.0rc1/docs/api/ng.directive:ngBindHtml