Question

也许这个问题已经被问过了，但我搜索并尝试了下午的大部分时间而没有任何成功，所以我真的希望有人能帮助我。

我希望能够每隔几秒钟更新我在工厂服务中设置的$ http.get（） - 我的数据。

我在我的代码中添加了一些注释，并为你们留下了一些旧的东西，看看我尝试了什么。（旧的东西也被注释掉了）

我的代码：

    ovwid.factory('recentClients', [
    '$http', 
    '$rootScope',
function ($http, $rootScope) {

    var apiURL = '/plugins/data/get_client.php';
    var promise;

    var recentClients = 
    {
        async: function() 
        {
            if ( !promise ) 
            {   
                // $http returns a promise, which has a 'then' function, which also returns a promise
                promise = 
                $http.get(apiURL)
                    .then(function (response) {
                    // The then function here is an opportunity to modify the response
                    // The return value gets picked up by the then in the controller.
                    return response.data;
                });
            }
            // Return a promise to the controller
            return promise;
        }
    }
    return recentClients;
}]);


ovwid.controller(‘client’Ctrl, [
    '$scope',
    'recentClients',
    '$interval',
function ($scope, recentClients, $interval) {

    $scope.loading = true;

    function reloadData() {
        // a call to the async method
        recentClients().async().then(function(data) {
            // console.log(data);
            $scope.loading = false;
            $scope.client = data;
        });
    }

    // Initizialize function
    reloadData();

    // Start Interval
    var timerData = 
    $interval(function () {
        reloadData();
    }, 1000);  

    // function myIntervalFunction() {
    //     var cancelRefresh = $timeout(function myFunction() {
    //         reloadData();
    //         console.log('data refres')
    //         cancelRefresh = $timeout(myFunction, 5000);
    //     },5000);
    // };

    // myIntervalFunction();

    // $scope.$on('$destroy', function(e) {
    //         $timeout.cancel(cancelRefresh);
    // });
}]); // [/controller]

Answer 1

可能会有所帮助

function reloadData() {
        // a call to the async method
        $scope.loading = true;
        recentClients().then(function(data) {
            // console.log(data);
            $scope.loading = false;
            $scope.client = data;
        });
    }


// Start Interval
var timerData = 
$interval(function () {
    if(!$scope.loading){
       reloadData();
    }

}, 1000);

Answer 2

一些事情：）

recentClients().then(function(data)...无效，在您当前的代码中应该是：recentClients.async().then(function(data)

（同样的评论适用于`和’ qoutes，这些可能会变得非常棘手。

这是我用于设计服务的语法：

  ovwid.factory('recentClients', ['$http', '$rootScope', function ($http, $rootScope) {
    var apiURL = 'aaa.api';

    var recentClients = function() {
      return $http.get(apiURL)
    }

    return {
      recentClients : recentClients
    };
  }]);

完整示例：

（只需创建包含虚拟数据的aaa.api文件，启动服务器，您就会看到数据正在发生变化）

<!DOCTYPE html>
<html>
<head>
  <title>Sorting stuff</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

  <script>
  var ovwid = angular.module("ovwid", []);

  ovwid.factory('recentClients', ['$http', '$rootScope', function ($http, $rootScope) {
    var apiURL = 'aaa.api';

    var recentClients = function() {
      return $http.get(apiURL)
    }

    return {
      recentClients : recentClients
    };
  }]);


ovwid.controller('clientCtrl', [
    '$scope',
    'recentClients',
    '$interval',
function ($scope, recentClients, $interval) {

    $scope.loading = true;

    function reloadData() {
        // a call to the async method
        recentClients.recentClients().then(function(response) {
            // console.log(data);
            $scope.loading = false;
            $scope.client = response.data;
        });
    }

    // Initizialize function
    reloadData();

    // Start Interval
    var timerData = 
    $interval(function () {
        reloadData();
    }, 1000);  

}]);

  </script>

</head>
<body ng-app="ovwid" ng-controller="clientCtrl">

  {{ client }}

</body>
</html>

Answer 3

我看到了几个问题。

首先：

if ( !promise )第一次才会返回true。您正在将其分配给$http来电。

其次：

您永远不会访问工厂中的async方法。您需要从工厂return recentClients.async返回，或从范围recentClients.async().then(..

调用它

Answer 4

您可以设置服务以执行定期服务器调用。我已经在某个地方找到了这段代码并稍微改进了一下。我希望我能记住我得到它的地方。

angular.module('my.services').factory('timeSrv',['$timeout',function($timeout){

    //-- Variables --//

    var _intervals = {}, _intervalUID = 1;

    //-- Methods --//

    return {
        setInterval : function(op,interval,$scope){
            var _intervalID = _intervalUID++;

            _intervals[_intervalID] = $timeout(function intervalOperation(){
                op($scope || undefined);
                _intervals[_intervalID] = $timeout(intervalOperation,interval);
            },interval);

            return _intervalID;
        }, // end setInterval

        clearInterval : function(id){
            return $timeout.cancel(_intervals[id]);
        } // end clearInterval
    }; // end return
}]); // end timeSrv

然后在您的控制器中，您可以拨打电话：

$scope.getSomethingID = timeSrv.setInterval(function($scope){
    [... Do stuff here - Access another service ...]
},10000,$scope);

这将使用控制器的范围每10秒执行一次传递的函数。您可以随时通过以下方式取消：

timeSrv.clearInterval($scope.getSomethingID);

Angular：每隔几秒更新一次数据

4 个答案: