在 javascript 中加载 html 内容答案

【问题标题】：Load html content in javascript在 javascript 中加载 html 内容
【发布时间】：2015-06-29 16:17:55
【问题描述】：

我想要做什么：

我正在开发一个 Angular SPA，我想在 scope 中加载一些 html 内容以便显示它。

我做了什么：

根据 SO 问题（here 和 here），我创建了一个加载目标文件的函数，并将其内容加载到我的 scope 中（代码来自 Jason Sturges 的建议）：

 function loadPage(href) {

      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", href, false);
      xmlhttp.send();
      return xmlhttp.responseText;
 }

用于：$scope.pageContent = loadPage("html_file.html")

问题：

此时，html内容被加载。问题是，它没有被 Chrome 解释，而是显示为“纯文本”（我想这是正确的术语），如下所示：

 <div><h4>...</h4></div>

我该怎么办？

【问题讨论】：

您应该在 ajax 回调中将其分配给范围变量。
您不使用$http是否有特殊原因？
不，我只是不知道该怎么做，所以我从 SO 那里得到了一些想法

标签： javascript jquery html angularjs

【解决方案1】：

根据您的 angularJs 版本，它可以更改，但基于 angular 1.3，您应该使用 ng-bind-html 指令和 $sce 服务：

在模板中：

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

在控制器中：

$scope.securedHtml= $sce.trustAsHtml(yourRawHtmlFromServer);

就像另一个答案所说，使用内部 $http 服务（或 ngResource）进行 ajax 调用。

【讨论】：