拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 在路由Angular.js后防止擦除阵列

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

白鹭 - 2022-03-25 2125 0 0

我的 $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);
    });
});
标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *