angular.js on dynamic fetched data

Question

Can you use angular on dynamic fetched data? I have an existing application where most of the content is rendered by javascript after ajax-call. So I have this div that is filled by fetching data with ajax and then rendered by javascript. Well, in all these lot of html that is fetched by ajax, if I use ng-app on one of this elements, it doesnt seem to work. Doing the same thing with an html-element that has been fetched in the initial request (prior to the ajax-request) works.

So here is the code:

File: test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ang_app.js"></script>
<script>
    $( document ).ready(function() {
        $.ajax({
            url: "test2.php"
        }).success(function(data) {
            $('#content').html(data);
        });
    });
</script>
<body>
<h2>This is an app</h2>
<div ng-app ng-controller="StatsCtrl2">StatsCtrl2</div>
<div id="content"></div>
</body>
</html>

File test2.php:

<?php
echo '<div style="background-color:green;" ng-app ng-controller="StatsCtrl">Should be StatsCtrl</div>';

File ang_app.js:

function StatsCtrl($scope){
alert("function StatsCtrl");
}

function StatsCtrl2($scope){
alert("function StatsCtrl2");
}

Well, running this app I see the alert for "StatsCtrl2". But the alert inside "StatsCtrl" never shows app. Am I doing something wrong?

The short answer to your question is yes. If you want some more detailed help, you'll need to provide some code, or many many more details. — Blunderfest
– Blunderfest, Commented Sep 5, 2014 at 14:58
The thing is that data is fetched by ajax by doing an xmlrpc-request. The data is the returned as pure xml. Javascript goes through this data and builds html-structure. I added angular.js and the controller.js in the "statical" part of the code, the code returned by the initial request. You mean it should work. But when the page has loaded (before the ajax-request) the ng-app will not be found as it will appear after the xmlrpc-request has been done and after the javascript renders the html. You still think it should work? — user3726562
– user3726562, Commented Sep 5, 2014 at 15:04
Add a sample of your code and you will be able to get much better answers. — Blunderfest
– Blunderfest, Commented Sep 5, 2014 at 15:09

Sergiu Paraschiv · Accepted Answer · 2014-09-08 09:23:25Z

(1) AngularJS runs on $(document).ready. That means by the time the AJAX response comes ng-controller="StatsCtrl2" is already bound to that DIV.

(2) As I said in (1), AngularJS parses the directives in your HTML on DOM ready. You need to $compile the HTML you are injecting afterwards.

(3) You are adding ng-app and ng-controller inside existing ng-app and ng-controller. When you fix all the other issues this will most probably cause some more issues.

You are taking a bad approach to this. In normal circumstances you only have access to AngularJS built-in stuff inside services, controllers, directives and so on. I'm specifying this because the solution to your problem would be to

    $.ajax({
        url: "test2.php"
    }).success(function(data) {
        $('#content').html(data);
        $compile($('#content'))($scope);
    });

but there's no $compile or $scope there. Those only exist inside the AngularJS Application.

You need to stop using jQuery and start using actual AngularJS constructs specifically designed for this: a controller together with $http or maybe ng-include. Then you won't have to worry about (2) and (3).

I repeat: AngularJS is not intended to be used the way you are using it. You will only get into further trouble later on if you somehow hack what you have and make it work.

Thanks. Sorry but IM not sure I understand your conclusion. Are you saying more or less that angular works bad when the controllers are created on the fly, by data fetched with ajax?
AngularJS works exactly the way it was intended to, nothing bad or good about it. It was never intended for it to watch for any DOM changes and angularize them. If you need that then you have to do it yourself. The AngularJS way of applying directives to a piece of HTML is the built-in $compile method: docs.angularjs.org/api/ng/service/$compile

Collectives™ on Stack Overflow

angular.js on dynamic fetched data

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related