I have a problem with the $interval service and the Routing in Angualr.js I want to navigate throw pages, and I don't want to lose the data that were on another page... I'll explain... I'm using the library chart.js to generate a simple line chart. then I'm generating every 5 secs some data and I'm pushing this data into an array that helps me to build the chart (if u know the library u know what I'm talking about). when I route into another page and the come back the chart is gone, the data are all gone, it start from zero. What can I? here it is my code...

$(function(){

var myWallet = 1000000000;
var BTCWallet = 0;
var ETHWallet = 0;
var CROWallet = 0;


var app = angular.module("myApp", ["ngRoute","chart.js"]);

/**roting dell'app */
app.config(function($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix(''); 
    $routeProvider
    .when("/dashboard", {
      templateUrl : "dashboard.html"
    })
    .when("/wallet", {
      templateUrl : "wallet.html"
    })
    .when("/trading", {
      templateUrl : "trading.html"
    })
    .when("/home", {
        templateUrl : "home.html"
      })
    ;
  });

/**controller per il timer nella dashboard

 */
app.controller('countCtrl', function($scope, $interval){

   $scope.theTimer = 5;

 var stopTimer = $interval(()=>{

    $scope.theTimer = $scope.theTimer -1;

    if ($scope.theTimer == 0){
    $scope.theTimer = $scope.theTimer  5;
}

    },1000);

    $scope.$on('$destroy', function() {
        $interval.cancel(stopTimer);
});


});


/**
 * Chat setup and options
 */


app.controller("chartCtrl", function($rootScope,$scope,$interval){

    $scope.labels = [];
    $scope.series = ['BTC', 'ETH' , 'CRO'];

    $scope.data = [
      [],[],[]
    ];

   var stopChart = $interval(()=>{
     console.log($scope.data[0].push($rootScope.BTCCoin *1));
    console.log($scope.data[0]);

    $scope.data[1].push($rootScope.ETHCoin *1);
    $scope.data[1];

    $scope.data[2].push($rootScope.CROCoin *1);
    $scope.data[2];

    $scope.ora = new Date();
    var orario = $scope.ora.toLocaleTimeString();

    console.log($scope.labels.push(orario));
    console.log($scope.labels);

    },5000);

    $scope.$on('$destroy', function() {
              $interval.cancel(stopChart);
    });

  });

/**currecy controller */
app.controller('currencyCtrl', function($scope,$rootScope, $interval){

$rootScope.BTCCoin = (Math.random()* 53000).toFixed(2); /* toFixed per scegliere quanti numeri generare dopo la virgola*/
$rootScope.ETHCoin = (Math.random()* 4500).toFixed(2); 
$rootScope.CROCoin = (Math.random()* 49777).toFixed(2);


var stopCurrency = $interval(()=>{

    do{
        $rootScope.BTCCoin = (Math.random()* 53000).toFixed(2);
    }while($rootScope.BTCCoin < 48000);


    do{
        $rootScope.CROCoin = (Math.random()* 49777).toFixed(2);
    }while($rootScope.CROCoin < 3200);

    do{
        $rootScope.ETHCoin = (Math.random()* 4500).toFixed(2);
    }while($rootScope.ETHCoin < 3800);



},5000);

$scope.$on('$destroy', function() {
    $interval.cancel(stopCurrency);
});

})




});

CodePudding user response：

The data being used in the table is deleted when the user navigates away from the chart controller page. When the user returns, this data is started fresh, hence the empty table on return.

To fix this, on page leave the data table should be saved in a service from $scope.data. On return, the data should be pulled from the service and back into $scope.data.

You can try something similar

// Untested code

app.factory("chartService", function() {
    var chartData;

    function saveData(data) {
      chartData = data;          
    }

    function getData() {
      return chartData;
    }

    return {
      saveData: saveData,
      getData: getData
    };
});

app.controller("chartCtrl", function($rootScope, $scope, $interval, chartService) {
    var data = chartService.getData();       
    if (data) {
      // Navigating back
      $scope.data = data;
    } else {
       // First visit of the session
       $scope.data = [[],[],[]];
    }
    
     // interval code ...

    $scope.$on('$destroy', function() {
          chartService.saveData($scope.data);
          $interval.cancel(stopChart);
    });
});