使用AngularJS解析ng-bind中的HTML

Question

我在使用AngularJS时遇到了问题。我的应用程序从服务器请求一些数据，其中从服务器返回的数据之一是一个包含HTML字符串的值。我正在使用以下方式将其绑定到我的Angular模板中：

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

但是正如你所预期的那样，我看到的不是图标的图片，而是标记语言。基本上，div中的内容看起来像：

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

这不是我想要的。

有人知道我可以做什么来解析转录中的HTML吗？

- Subtubes

Answer 1

您想要使用ng-bind-html和ng-bind-html-unsafe来实现这种目的。

示例在此处显示：这里。

- Tosh

---

我应该如何在ng-bind-html中使用它？我知道如何使用ng-bind-unsafe-html，但不确定unsafe是否意味着这是一种不好的做法。您能详细说明一下ng-bind-html吗？Angular文档对此并不清楚。我尝试过使用它，但没有成功。 - Subtubes

老实说，我不是很确定。但我的理解是，清洗器将删除带有任何外部引用的标签，例如href、src等等...如果您绑定用户输入，那么可能是不安全的，但如果您绑定到自己的内部值，我认为使用未经过清洗的版本是可以的。 - Tosh

ng-bind-html是在ngSanitize模块中的，就像ngResource一样，并没有预装在Angular中。您需要包含该脚本并确保您的应用程序依赖于它：var app = angular.module('app', ['ngSanitize']);。然后您就可以使用ng-bind-html指令了，像这样使用：<div ng-bind-html="somemodel"></div>。 - satchmorun

你可以在这里找到所有的插件：http://code.angularjs.org/ - sidonaldson

使用ng-bind-html与$sanitize提供程序一起使用。 - Luis Delgado

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 
});

- Mher

Answer 3

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

请参见：http://docs.angularjs.org/api/ng.$compile 最后，目前，AngularJS的最新版本（1.2.0 RC 1）没有任何ng-bind-html-unsafe指令。因此，在未来更新应用程序之前，请考虑使用此选项。（ng-bind-html-unsafe可能将不再起作用...） http://code.angularjs.org/1.2.0rc1/docs/api/ng.directive:ngBindHtml

- Pierre Broucz

---

你是不是想说 $sanitize 而不是 $compile？ - Paul Taylor