How to replace a html content with jsf reRender or ajax load, and rebind the new DOM with AngularJS?

Question

Consider a bit of code:

  
Original Content
  
Some data
  

    


        
                      

              相关标签:
       
      

Answer 1

We need to compile and apply the AngularJS scope for the new DOM:

On controller, create a function to compile a new html, and bind to same scope:

$scope.compileDOM = function($el) {
    ($compile($el))($scope);
    $scope.$apply();
};

And, after load, call it:

$('#dest').load('replace.html', function() {
    $dest.scope().compileDOM($dest);
});

Look to the function .scope(). It allows to find a correct AngularJS scope for a HTML element. It doesn't need to point directly to element with ng-controller, any element under the ng-controller can be used.

Plunker sample: PLUNKER