AngularJS doesn't execute in HTML inserted with document.write()

Question

I want to insert HTML coming from a JS function, which is executed when the body is loaded. Initially the body is empty.

This HTML has AngularJS commands, but the problem is that AngularJS doesn't parse the 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>

The content of controller.js is:

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."
    }
    ];
}

I believe document.write() actually wipes the whole page, not only the body, so the AngularJS scripts as well. So even if they would process HTML added later on, it wouldn't have a chance to. — 11684
– 11684, Commented Oct 23, 2013 at 15:36

Mahbub · Accepted Answer · 2012-12-01 05:38:49Z

3

The onload code is executed after AngularJS actually parses the DOM. So to catch them into Angular you have to use $compile. Look in the docs about how $compile works.

answered Dec 1, 2012 at 5:38

Mahbub

3,11825 silver badges29 bronze badges

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

1 Comment

Michelle Tilley Over a year ago

stackoverflow.com/questions/11699635/… is a good reference on SO.

Collectives™ on Stack Overflow

AngularJS doesn't execute in HTML inserted with document.write()

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related