使用angularJS解析ng-bind中的html [重复]

Posted 2023-02-24

【中文标题】使用angularJS解析ng-bind中的html [重复]

【英文标题】：parse html inside ng-bind using angularJS [duplicate]

【发布时间】：2013-01-31 01:56:40

【问题描述】：

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

<div>item.location_icons</div>

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

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

这不是我想要的。

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

【参考方案1】：

您想将ng-bind-html 和ng-bind-html-unsafe 用于该目的。

示例显示here

【讨论】：

如何将它与 ng-bind-html 一起使用.你能详细说明一下 ng-bind-html 吗？角度文档对此不是很清楚。我试过用它，它没有工作

老实说，我不太清楚。但我的理解是，sanitizer 会删除带有任何外部引用的标签，例如href、src 等...如果您正在绑定用户输入，那么它可能是不安全的，但您正在绑定到您自己的内部值，我认为使用未清理的版本是可以的。

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

感谢两位的回答，他们非常有帮助

@EdgarMartinez 在这种情况下“不安全”意味着数据源不受信任（例如，html 来自用户通过表单输入）

【参考方案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 
);

【参考方案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

【讨论】：

你的意思是$sanitize而不是$compile吗？