动态显示HTML页面AngularJS

Question

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

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

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

Answer 1

我想你正在寻找ngInclude 。
您甚至不需要处理AJAX请求，它已经为您完成了。

获取，编译并包含外部HTML片段。

用法

<ANY
  ng-include="path_of_your_file.html"
  [onload="string"]
  [autoscroll="string"]>
  ...
</ANY>

需要注意的重要事项：

• 您的HTML文件需要位于同一个域中，否则会变得复杂（请参阅文档）
• 这是一个模板，意思是：
  • 所有相对路径都将相对于当前路径，而不是相对于导入模板的路径
  • 将对其中的角度进行评估

Answer 2

你的问题是角度消毒。 在将HTML内容粘贴到标记为可信HTML的特殊变量之前，它不会让您使用ng-bind-html 。 Angular让你这样做，以便你知道你非常明确地告诉Angular它可以渲染这个标记。

它有助于保护普通开发人员不会意外地呈现未编码的用户输入，这将是非常危险的。 您不希望用户在输入字段中提交javascript，然后让您的应用程序将该脚本直接呈现在页面中的某个位置。 如果是这样，恶意脚本将在呈现时运行，并可能导致各种各样的破坏。

您需要在应用程序的依赖项中包含ngSanitize模块。

var app = angular.module('myApp', ['ngSanitize']);

不要忘记在脚本引用中包含angular-sanitize lib。

<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？编辑= 101

Answer 3

要从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>

希望能帮助到你。

Answer 4

您可以使用ui-router实现您的目标。 这是相同的链接。

使用ui-select一旦用户选择文件夹。 在控制器中编写一个事件触发器，将URL更改为预定义的URL。 使用$ stateProvider。 你也可以在这里看到他们的例子

希望有所帮助