javascript - Angular: Update data every few seconds - Stack Overflow

admin管理员组

文章数量:1391960

Maybe this question has already been asked, but I searched and tried most of my afternoon without any success so I really hope somebody can help me with this.

I want to be able to update my $http.get() - my data - that I have set in a factory service, every few seconds.

I added some ment to my code and also left some old stuff for you guys to see what I have tried. (the old stuff is also mented out)

My code:

    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]

Maybe this question has already been asked, but I searched and tried most of my afternoon without any success so I really hope somebody can help me with this.

I want to be able to update my $http.get() - my data - that I have set in a factory service, every few seconds.

I added some ment to my code and also left some old stuff for you guys to see what I have tried. (the old stuff is also mented out)

My code:

    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]

• javascript
• angularjs
• angularjs-directive
• intervals

Share Improve this question Follow edited Nov 14, 2015 at 17:26 Facyo Kouch asked Jul 25, 2014 at 13:15 Facyo KouchFacyo Kouch 78788 silver badges2727 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

I see several issues.

First:

if ( !promise ) is only going to return true the first time. You are assigning it to the $http call.

Secondly:

You never access the async method in your factory. You either need to return that from factory return recentClients.async or call it from scope recentClients.async().then(..

may be it will help

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

A few things :)

recentClients().then(function(data)... will not work, in your current code it should be: recentClients.async().then(function(data)

(same remark would apply to ` and ’ qoutes that can get really tricky.

---

This is the syntax I use for designing services:

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

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

    return {
      recentClients : recentClients
    };
  }]);

---

Full example:

(just create aaa.api file with some dummy data, fire up a server and you'll see that data is changing)

<!DOCTYPE html>
<html>
<head>
  <title>Sorting stuff</title>
  <script src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis./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>

You can set up a service to perform periodic server calls for you. I had found this code somewhere awhile back and refined it a bit. I wish I could remember where I got it.

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

And then in your controller you'd make a call like so:

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

This will execute the passed function every 10 seconds with the scope of the controller. You can cancel it at anytime by:

timeSrv.clearInterval($scope.getSomethingID);

本文标签： javascriptAngular Update data every few secondsStack Overflow