AngularJS 轮询服务不会持续更新控制器答案

【问题标题】：AngularJS polling service not continuously updating controllerAngularJS 轮询服务不会持续更新控制器
【发布时间】：2015-02-28 23:02:46
【问题描述】：

我正在尝试使用轮询服务不断更新控制器。我的服务正在运行，并且可以验证它正在轮询并正确获取新数据。我无法工作的是更新使用该服务的控制器。

这是我所拥有的：

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 语句不正确。它只返回在服务顶部声明的大部分为空的对象。

如何让服务在 http 响应返回时自动更新控制器？

【问题讨论】：

标签： angularjs angularjs-service angularjs-controller

【解决方案1】：

你必须得到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
    }
});

【讨论】：

太棒了！我谢谢你。我已经使用 Angular 几个小时了，我很喜欢它，只是要摆脱我的 jQuery 流习惯。有趣的是，我正要评论它有效，除了返回的 JSON 数组缺少 [0] 索引。您编辑帖子的速度太快，我无法发表评论 :) 再次感谢！
@tymeJV 为什么建议将超时逻辑包含在控制器代码中，而不是包含在服务中？我正在尝试确定使用 angular 进行轮询的最佳实践。

【解决方案2】：

您需要在您的工厂中进行回调，然后返回一个将在您的控制器中使用的函数：

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;
    });
});

【讨论】：