防止路由后擦除数组 Angular.js

Question

我对 $interval 服务和 Angualr.js 中的路由有疑问我想浏览抛出的页面，我不想丢失另一页上的数据......我会解释......我正在使用库 chart.js 生成一个简单的折线图。然后我每 5 秒生成一些数据，并将这些数据推送到一个数组中，以帮助我构建图表（如果你知道图书馆，你就会知道我在说什么）。当我进入另一个页面并返回时图表消失了，数据都消失了，它从零开始。我能做什么？这是我的代码...

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

})




});

Answer 1

当用户离开图表控制器页面时，table 中使用的数据将被删除。当用户 returns 时，此数据重新开始，因此 return 上的空 table。

要解决此问题，请在离开页面时将数据 table 保存在来自 $scope.data 的服务中。在 return，数据应该从服务中提取并返回到 $scope.data.

你可以试试类似的东西

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

防止路由后擦除数组 Angular.js

Prevent the wiping of an Array after routing Angular.js

routes

angularjs

chart.js