您好，我找不到合适的解决方案。请帮帮我。
我在页面中有一个带有 ui-selects 的单页应用程序，基本上它是用于目录列表的。用户将选择文件夹，最后当他/她在列表中选择一个 HTML 文件时，我正在生成一个 url，我必须在我的 spa 中显示 html 文件。我能够显示文本文件，但我不知道如何显示 html 文件。我尝试了 ng-bind-html，但不知道如何显示。
我正在使用 $http.get 方法获取 html 的内容，并将 html 内容存储在一个名为“contentHTML”的变量中，我需要显示它
【问题讨论】：
标签： javascript html angularjs
您的问题与角度消毒有关。除非您将 HTML 内容粘贴到标记为受信任 HTML 的特殊变量中，否则它不会让您使用 ng-bind-html。 Angular 让你这样做是为了让你知道你非常明确地告诉 Angular 可以渲染这个标记。
它有助于保护普通开发人员免于意外呈现未编码的用户输入，这将是非常危险的。您不希望用户在输入字段中提交 javascript，然后让您的应用将该脚本直接呈现到页面中的某个位置。如果是这样，恶意脚本会在渲染时运行，并可能造成各种破坏。
您需要在应用的依赖项中包含ngSanitize 模块。
var app = angular.module('myApp', ['ngSanitize']);
不要忘记在脚本引用中包含 angular-sanitize 库。
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js"></script>
然后，您需要使用$sce 服务将您的 HTML 内容标记为可以安全呈现。
app.controller('myController', function ($scope, $sce) {
$scope.trustedHtml = $sce.trustAsHtml(contentHTML);
});
只有这样ng-bind-html 才能工作。
<div ng-bind-html="trustedHtml"></div>
【讨论】：
anguler.element 代替所有$ 调用。为方便起见，您可以使用var $ = angular.element;。您还可以使用它将脚本标签移动到底部。 $('script').append('body');。这会将所有脚本标签移动到正文的底部。
我想你正在寻找ngInclude。
您甚至不需要处理 AJAX 请求，它已经为您完成了。
获取、编译并包含一个外部 HTML 片段。
用法
<ANY
ng-include="path_of_your_file.html"
[onload="string"]
[autoscroll="string"]>
...
</ANY>
需要注意的重要事项：
【讨论】：
要从 contentHtml 显示您的 html，您需要在您的 html 页面上有一个 div，例如：
<div ng-controller="htmlBucket">
{{content}}
</div>
那么在你的javascript中你应该有这个
app.registerCtrl('htmlBucket', function($scope)
{
$scope.content = $sce.trustAsHtml(contentHTML);
});
不要忘记在 HTML 中包含 .js、jquery 和 angular 依赖项
<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
希望对你有帮助。
【讨论】：
"<h1>hi</h1>" 转换为"&lt;h1&gt;hi&lt;/h1&gt;"。
&lt;h1&gt;hi&lt;/h1&gt; 粘贴到网页中的情况，它会将源呈现为要显示的页面内容。即你会在页面上看到<h1>hi</h1> 以纯文本形式显示。 Demo
ngSanitize 作为应用依赖项。我的回答详细介绍了$sce 服务:)