Load html content in javascript

Question

What I'm trying to do :

I'm working on an Angular SPA, and I'd like to load some html content in a scope in order to display it.

What I did :

According to SO questions (here and here), I create a function which loads the targeted file and I load its content in my scope (code is from Jason Sturges suggestion) :

 function loadPage(href) {

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

Used with : $scope.pageContent = loadPage("html_file.html")

Problem :

At that time, the html content is loaded. The problem is that, instead of being interpreted by Chrome, it appears as 'plain text' (I guess it's the right term for that), like this :

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

What should I do ?

you should assgin it to a scope varialbe in a ajax callback. — huan feng, Jun 29 '15 at 08:07
Is there a special reason you're not using [`$http`](https://docs.angularjs.org/api/ng/service/$http)? — Yoshi, Jun 29 '15 at 08:19
No, I had just no idea on how to do that, so I get some ideas from SO — Arhyaa, Jun 29 '15 at 08:26

score 3 · Accepted Answer · answered Jun 29 '15 at 08:17

Depending on your angularJs version, it can change, but based on angular 1.3, you should use the ng-bind-html directive with the $sce service :

In template :

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

In controller :

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

And like the other answer said, use the internal $http service (or ngResource) to make your ajax calls.

Load html content in javascript

1 Answers1