CODEWITHSUNDEEP
angularjs
Blair Osbay
Blair Osbay

Reputation: 227

Calling code in Angular controller at intervals

In the following code snippet, I would like to call the code inside the function at intervals (starting with var layout_url and ending with fillLayoutData(xFactory, val.position, val.url, val.height, cType);).

rp3.controller('c1Ctrl', [
    '$scope',
    'xFactory',
    function($scope, xFactory) {

        var layout_url = "json/dashboard/layout/mpu/layout.json";

        xFactory.getJSON(layout_url, function(layout) {// read layout's web
            // service
            $.each(layout, function(i, val) {
                chart.push({
                    "v" : val,
                    "x" : xFactory
                });
                var cType = getChartType(val.chartType);
                // alert(cType);
                drawLayout(parentDIV.name, val.position, val.width,
                        val.height, val.title, val.color, val.bgcolor,
                        buttomCtrl.withCtrl, cType);
                fillLayoutData(xFactory, val.position, val.url, val.height,
                        cType);
            });
        }, function() {
            console.log("Connection! ");
        });
    } ]);

How can I achieve this?

Upvotes: 0

Views: 143

Answers (2)

fbid
fbid

Reputation: 1570

The most simple way to do that is:

  • injecting the $interval service in the controller
  • wrap all theecessary code inside a method.
  • use the $interval service to call the method and set a delay

Code example:

rp3.controller('c1Ctrl', ['$scope','xFactory','$interval'
  function($scope, xFactory, $interval) {


    var layout_url = "json/dashboard/layout/mpu/layout.json";


    //1. Wrap all the necessary code inside a method
    $scope.foo = function(){
      xFactory.getJSON(layout_url, function(layout) { // read layout's web
        // service
        $.each(layout, function(i, val) {
          chart.push({
            "v": val,
            "x": xFactory
          });
          var cType = getChartType(val.chartType);
          // alert(cType);
          drawLayout(parentDIV.name, val.position, val.width,
            val.height, val.title, val.color, val.bgcolor,
            buttomCtrl.withCtrl, cType);
          fillLayoutData(xFactory, val.position, val.url, val.height,
            cType);
        });
      }, function() {
        console.log("Connection! ");
      });
    };



    //2. use $interval service. I use 2s delay (2000ms)
    $interval($scope.foo, 2000);



  }
]);

Additional note:

  • You need to just wrap the getJSON() function, not the layout_url variabile, as it's not needed since its value never change.

Upvotes: 0

aseferov
aseferov

Reputation: 6393

put part of your code in function which you want call at intervals and call it with $intervals

rp3.controller('c1Ctrl', [
'$scope',
'xFactory',
'$interval',
function ($scope, xFactory, $interval) {

    var layout_url = "json/dashboard/layout/mpu/layout.json";

    $scope.myIntervalFunction = function () {
        xFactory.getJSON(layout_url, function (layout) {// read layout's web
            // service
            $.each(layout, function (i, val) {
                chart.push({
                    "v": val,
                    "x": xFactory
                });
                var cType = getChartType(val.chartType);
                // alert(cType);
                drawLayout(parentDIV.name, val.position, val.width,
                    val.height, val.title, val.color, val.bgcolor,
                    buttomCtrl.withCtrl, cType);
                fillLayoutData(xFactory, val.position, val.url, val.height,
                    cType);
            });
        }, function () {
            console.log("Connection! ");
        });
    }


    var interval = $interval(function(){
      return $scope.myIntervalFunction()
     },100) 
}]);

Upvotes: 1

Related Questions