动态显示HTML页面AngularJS

Question

嗨,我找不到合适的工作解决方案.请帮帮我.

我在页面中有一个带有ui-choose的单页面应用程序,基本上是用于目录列表.用户将选择文件夹,最后当他/她选择列表中的HTML文件时,我生成一个网址,我必须在我的水疗中心显示html文件.我能够显示文本文件,但我不知道如何显示html文件.我尝试了ng-bind-html,但不知道如何显示它.

我使用$ http.get方法获取html的内容并将html内容存储在名为"contentHTML"的变量中我需要显示

Answer 1

您的问题是角度清理。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>

然后，您需要将 HTML 内容标记为可以安全地使用该服务呈现$sce。

app.controller('myController', function ($scope, $sce) {
  $scope.trustedHtml = $sce.trustAsHtml(contentHTML);
});

只有这样才会ng-bind-html起作用。

<div ng-bind-html="trustedHtml"></div>