AngularJS polling service not constantly updating controller
I am trying to keep a controller up to date using a polling service. I have a service running and I can verify that it is polling and getting new data. I can't seem to work, this is updating the controller that uses this service.
Here's 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 user interface is never updated with the current object returned by the polling service. My guess is that the return statement in the service is wrong. It only returns a mostly empty object declared at the top of the service.
How do I get the service to automatically update the controller whenever an HTTP response is returned?
source to share
You got return
some of this data - and don't put the logic timeout
in the service - it should be in your controller code. You can refactor the handling of 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
}
});
source to share
You need a callback in your factory and then return a function to 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 call the function poller
and inside the callback success
update your scope:
cadApp.controller('statsController', function ($scope, DashboardStats) {
DashboardStats.poller(function(data) {
$scope.data = data;
});
});
source to share