CODEWITHSUNDEEP
angularjsangularjs-serviceangularjs-controller
LJ Wilson
LJ Wilson

Reputation: 14427

AngularJS polling service not continuously updating controller

I am trying to update a controller continuously using a polling service. I have the service working and can verify it is polling and getting new data properly. What I can't get working is the updating of the controller that uses that service.

Here is what I have:

cadApp.controller('statsController', function ($scope, DashboardStats) {
    $scope.data = DashboardStats.data.response;
    console.log(JSON.stringify(DashboardStats.data.response));    
});

cadApp.run(function (DashboardStats) { });

cadApp.factory('DashboardStats', function ($http, $timeout) {
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

    var data = { response: {}, calls: 0 };
    var url = "Ajax/CADAjax.aspx";
    var params = { "Command": "GetDashboardStats" };

    var poller = function () {
        $http.post(url, Object.toparams(params))
     .then(function (responseData) {
         data.response = responseData.data[0];

         // This is working
         console.log(JSON.stringify(responseData.data[0]));
         data.calls++;
         $timeout(poller, 10000);
     });
    };
    poller();

    return {
        data: data
    };
});

The UI never updates with the current object returned by the polling service. My guess is that the return statement in the service isn't right. It is only returning the mostly empty object declared at the top of the service.

How do I get the service to automatically update the controller whenever the http response comes back?

Upvotes: 3

Views: 2463

Answers (2)

tymeJV
tymeJV

Reputation: 104785

You got to return some of that data - and dont put the timeout logic in the service - that should be contained in the controller code. You can refactor to handle the response in the controller and the data call contained in the service:

cadApp.controller('statsController', function ($scope, $timeout, DashboardStats) {
    pollData();

    function pollData() {
        DashboardStats.poll().then(function(data) {
            $scope.data = data;
            $timeout(pollData, 10000);
        });
    }
});

cadApp.factory('DashboardStats', function ($http, $timeout) {
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

    var url = "Ajax/CADAjax.aspx";
    var params = { "Command": "GetDashboardStats" };
    var data = { response: { }, calls: 0 };

    var poller = function () {
        return $http.post(url, Object.toparams(params)).then(function (responseData) {
            data.calls++;
            data.response = responseData.data[0];

            return data;
        });
    };

    return {
        poll: poller
    }
});

Upvotes: 4

Darin Dimitrov
Darin Dimitrov

Reputation: 1039110

You need a callback in your factory and then return a function which will be used in your controller:

cadApp.factory('DashboardStats', function ($http, $timeout) {
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

    var data = { response: { }, calls: 0 };
    var url = "Ajax/CADAjax.aspx";
    var params = { "Command": "GetDashboardStats" };

    var poller = function (success) {
        $http.post(url, Object.toparams(params)).then(function (responseData) {
            data.response = responseData.data[0];
            success(data);
            data.calls++;
            $timeout(poller, 10000);
        });
    };

    return {
        poller: poller
    };
});

and then in your controller invoke the poller function and inside the success callback update your scope:

cadApp.controller('statsController', function ($scope, DashboardStats) {
    DashboardStats.poller(function(data) {
        $scope.data = data;
    });
});

Upvotes: 3

Related Questions