Best IT Recipes

AngularJS not executing in HTML pasted with document.write ()

I want to insert HTML coming from a JS function that executes when the body loads. Initially, the body is empty.

There are AngularJS commands in this HTML, but the problem is that AngularJS does not parse HTML.

<!doctype html> <html ng-app> <head> <script> function loadHTML(){ html = '<ul ng-controller="phoneCtrl"><li ng-repeat="phone in phones">{{phone.name}}<p>{{phone.snippet}}</p></li></ul><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script'+'><script src="controllers.js"></script'+'>'; document.write = html; } </script> </head> <body onload="loadHTML();" ></body> </html>

Contents of the .js controller:

 function phoneCtrl($scope) { $scope.phones = [ { "name": "Nexus S", "snippet": "Fast just got faster with Nexus S." }, { "name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet." }, { "name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet." } ]; }
+3
javascript angularjs
Dec 01
source share
1 answer

The onload code is executed after AngularJS actually parses the DOM. To catch them in Angular, you need to use $ compilation. See the docs for how compilation works.

+3
Dec 01
source share


More articles:


All Articles