Loading html content into javascript
What I am trying to do:
I am working on Angular SPA and I would like to load some html content in scope
order to display it.
What I've done:
According to SO questions ( here and here ), I create a function that downloads the target file and I load its contents into mine scope
(code 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 this time, the html content is loaded. The problem is that instead of being interpreted in Chrome, it looks like "plain text" (I assume that's the correct term for this), for example:
<div><h4>...</h4></div>
What should I do?
source to share
It may change depending on your version of angularJs, but based on angular 1.3 you should use the ng-bind-html directive with the $ sce service :
In the template:
<div ng-bind-html="securedHtml"></div>
In the controller:
$scope.securedHtml= $sce.trustAsHtml(yourRawHtmlFromServer);
And like in the other answer, use the $ http (or ngResource ) internal service to make your ajax calls.
source to share