AngularJS $http HTML Parser

Question

All, we're developing a webapp with AngularJS and we have a use case/requirement (that won't happen very often at all) where we will need to retrieve a complete HTML document from our static server. However, it appears that the $http object returns a raw HTML string as its 'data'. We are trying to avoid using an external library (like jQuery, for instance), but we need to parse that raw HTML string into a queriable DOM object. We could use an iframe and be done with it, but we're also trying to avoid using iframes for well-known reasons.

So, the question is: does AngularJS have a parser for HTML (as it does for JSON)? Or else, what's the most graceful way to handle this case?

P.S.: We tried sifting through Angular's API docs, but in all honesty they are hit-or-miss and unintuitive to navigate around.

It seems to be no html parser like json with angularJS. If you dont want to use iframe (and I would avoid it too) you can put the result html into a hidden div of your page then use it like other elements. — Jonathan Muller, Oct 30 '12 at 14:32
jQuery technically is not an extra library. Angular uses jQuery lite in it. — maxisam, Oct 30 '12 at 14:39
@maxisam So...that's interesting. How would we use the bundled jQuery? Through the $() or window.jQuery()? Thanks. — rdodev, Oct 30 '12 at 14:51
I mean if you want to use jquery selector, you still need to include jQuery. — maxisam, Oct 30 '12 at 15:20
possible duplicate of [AngularJS 1.2.0 ngBindHtml and trustAsHtml not working with ngModel](http://stackoverflow.com/questions/19625850/angularjs-1-2-0-ngbindhtml-and-trustashtml-not-working-with-ngmodel) — Paul Sweatte, Dec 22 '14 at 12:54
@PaulSweatte How is it a duplicate? Just because both want to deal with html within angular app, doesn't mean our question and our use case is the same. — rdodev, Dec 22 '14 at 15:28

score 12 · Accepted Answer · edited Sep 01 '16 at 08:52

If you need to get a DOM element from the string programmatically, parsing html into a DOM object is pretty simple.

Basically you'd use DOMParser.

var parser = new DOMParser();
var doc = parser.parseFromString('<div>some html</div>', 'text/html');
doc.firstChild; //this is what you're after.

From there if you wanted to query to get elements from it with vanilla JS (meaning, you don't want to use JQuery for some reason), you can do this:

//get all anchor tags with class "test" under a div.
var testAnchors = doc.firstChild.querySelectorAll('div a.test');

... but note: querySelectorAll is only supported in IE8 and higher.

EDIT: additional approach...

The "wrap" method:

var div = document.createElement('div');
div.innerHTML = '<div>some html</div>';
var result = div.childNodes;

... do note that this method will return HTMLUnknownElements if you put SVG or MathML into it. They'll "look" normal, but they won't work.

maxisam · Answer 2 · 2012-10-30T15:39:58.667

First of all, Angular uses jQuery as well. (jQuery lite)

From FAQ

Does Angular use the jQuery library?

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

However, I think you don't need full jQuery function here anyway.

That is what I did.

I use a directive and get the html as template and set replace as true.

jsFiddle

<myhtml></myhtml>

angular.module('myApp', []).directive('myhtml', function($http) {


    return {
        restrict: 'E',
        scope: {},
        template:'',
        link: function(scope, element, attrs) {
           $http.post('/echo/json/', data).success(function(re) {
               element.html(re.html);
        });
    }
    }
});

Edit note:

I just update the jsFiddle.

I include jquery on top for echoing the request in jsFiddle. In real, you don't need that.

However, it shows you that you can use jQuery in Angular.

If your html doesn't contain any angular tag, this example should work as your expectation .

Otherwise, you need to use compile instead of link.

AngularJS $http HTML Parser

2 Answers2

EDIT: additional approach...

Linked