在javascript中加载html内容

Question

我正在尝试做什么：

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

我做了什么 ：

根据SO问题（ 这里和这里 ），我创建了一个加载目标文件的函数，并将其内容加载到我的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>

我该怎么办 ？

Answer 1

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

在模板中：

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

在控制器中：

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

和其他答案一样，使用内部$ http服务（或ngResource ）来进行ajax调用。