使用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为了那种目的.

这些例子显示在这里

`ng-bind-html`位于`ngSanitize`模块中,就像`ngResource`没有使用Angular预先打包一样.你必须包含脚本,并确保你的应用程序依赖它:`var app = angular.module('app',['ngSanitize']);`.然后你可以访问`ng-bind-html`指令,你可以使用它:`<div ng-bind-html ="somemodel"> </ div>` (10认同)

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.

最后,目前,angularJS的最新版本(发布候选版本1.2.0)没有任何ng-bind-html-unsafe指令.因此,我非常鼓励您在将来更新应用之前考虑此选项.(ng-bind-html-unsafe可能/将不再工作......)