javascript - 动态显示 HTML 页面 AngularJS

Question

您好，我找不到合适的解决方案。请帮帮我。

我有一个在页面中带有 ui-selects 的单页应用程序，基本上它用于目录列表。用户将选择文件夹，最后当他/她在列表中选择一个 HTML 文件时，我正在生成一个 url，我必须在我的 spa 中显示 html 文件。我能够显示文本文件，但我不知道如何显示 html 文件。我试过 ng-bind-html，但不知道如何显示它。

我正在使用 $http.get 方法获取 html 的内容，并将 html 内容存储在一个名为“contentHTML”的变量中，我需要显示它

Answer 1

您的问题与 Angular sanitizer 有关。它不会让你使用 ng-bind-html 直到你将你的 HTML 内容放在一个标记为可信 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>

演示:http://codepen.io/Chevex/pen/xGYydr?editors=101