在路由Angular.js后防止擦除陣列

我的 $interval 服務和 Angualr.js 中的路由有問題我想導航拋出頁面，我不想丟失另一個頁面上的資料......我會解釋......我m 使用庫 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);
});

})




});

uj5u.com熱心網友回復：

當用戶離開圖表控制器頁面時，表中使用的資料將被洗掉。當用戶回傳時，此資料會重新開始，因此回傳時為空表。

為了解決這個問題，頁面上的資料表應該保存在 $scope.data 的服務中。回傳時，應從服務中提取資料并回傳到 $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);
    });
});

標籤：

上一篇：Angularjs指令在任何元素上按下回車鍵時觸發“單擊”事件

下一篇：如何在angularjs中的影像上添加水印？