Search code examples
javascriptajaxangularjsdynamic-html

Parse HTML fragment with AngularJS

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?

Solution

  • 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);