Parse HTML fragment with AngularJS

Question

I have a part of a screen that is retrieved dynamically through AJAX, and replaces an existing part (think about a paginated grid, that when you click on "next" you get a new HTML table than replaces the current). That fragment may content AngularJS bindings, like some directives that needs to be attached or minor data bindings.

Is there a way to make AngularJS parse that new fragment without reparse the whole document?

That's what $compile is for.

a better oliver
– a better oliver

2015-01-27 12:13:43 +00:00
Commented Jan 27, 2015 at 12:13 — a better oliver
– a better oliver, Commented Jan 27, 2015 at 12:13

vtortola · Accepted Answer · 2015-01-31 22:46:35Z

2

you can use $compile
for example you have

var htmlText = "<div>{{name}} <select>...</select></div>";

in your directive you can do like this

$scope.compiled= $compile(htmlText)($scope);

To parse a replaced section of the document would be:

var el = angular.element(document.getElementById('#container'));
el.html(ajaxHtml);
$compile(el.contents())(scope);

edited Jan 31, 2015 at 22:46

vtortola

36.1k33 gold badges169 silver badges270 bronze badges

answered Jan 27, 2015 at 12:57

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parse HTML fragment with AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related