AngularJS 轮询服务未持续更新控制器
AngularJS polling service not continuously updating controller
我正在尝试使用轮询服务不断更新控制器。我的服务正在运行,并且可以验证它正在轮询并正确获取新数据。我无法工作的是更新使用该服务的控制器。
这是我的资料:
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
};
});
UI 永远不会使用轮询服务 return 编辑的当前对象进行更新。我的猜测是服务中的 return 语句不正确。它仅 returning 在服务顶部声明的几乎为空的对象。
如何让服务在 http 响应返回时自动更新控制器?
您必须 return
一些数据 - 不要将 timeout
逻辑放在服务中 - 应该包含在控制器代码中。您可以重构以处理控制器中的响应和服务中包含的数据调用:
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
}
});
您需要在您的工厂中进行回调,然后 return 一个将在您的控制器中使用的函数:
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
};
});
然后在您的控制器中调用 poller
函数并在 success
回调中更新您的范围:
cadApp.controller('statsController', function ($scope, DashboardStats) {
DashboardStats.poller(function(data) {
$scope.data = data;
});
});
我正在尝试使用轮询服务不断更新控制器。我的服务正在运行,并且可以验证它正在轮询并正确获取新数据。我无法工作的是更新使用该服务的控制器。
这是我的资料:
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
};
});
UI 永远不会使用轮询服务 return 编辑的当前对象进行更新。我的猜测是服务中的 return 语句不正确。它仅 returning 在服务顶部声明的几乎为空的对象。
如何让服务在 http 响应返回时自动更新控制器?
您必须 return
一些数据 - 不要将 timeout
逻辑放在服务中 - 应该包含在控制器代码中。您可以重构以处理控制器中的响应和服务中包含的数据调用:
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
}
});
您需要在您的工厂中进行回调,然后 return 一个将在您的控制器中使用的函数:
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
};
});
然后在您的控制器中调用 poller
函数并在 success
回调中更新您的范围:
cadApp.controller('statsController', function ($scope, DashboardStats) {
DashboardStats.poller(function(data) {
$scope.data = data;
});
});