AngularJS + Ionic在從第二頁返回主頁后截斷范圍值。

Question

我在我的應用程序的“第一個”Ctrl中有以下代碼，它顯示倒計時的計時器。

一切都工作得很好，直到我訪問了第二頁，這是在這樣定義的app.js中：

  .state('app.home', {
      url: '/home:playlistData',
      views: {
        'menuContent' :{
          templateUrl: 'templates/home.html',
          controller: 'HomeCtrl'
        }
      }
    })

    .state('app.saved', {
      url: '/saved',
      views: {
        'menuContent' :{
          templateUrl: 'templates/saved.html',
          controller: 'SavedCtrl'
        }
      }
    })

如果我從第二個視圖回到第一個計數器仍然顯示但值

$scope.minutesLeft

沒有更新但是

setInterval

函數仍在后台執行代碼，更新的數據值仍保留在Dataholdingservice中。

我嘗試了范圍應用和超時功能，但沒有運氣。

有人能告訴我如何解決這個問題？

非常感謝任何幫助。

用於倒數計時器的HomeCtrl代碼如下：

 $scope.setTimer = function(timer) {
        console.log(timer);
        $scope.timer = timer;
    };

    $scope.saveTimer = function(timer) {
        if($scope.selectedSounds.length == 0) {
            $scope.showAlert("Add some sounds", "Cannot run timer for empty list");
        } else {
            $scope.clearCountDownAnimation();
            var animationTimerId = setInterval(function () {
                $("#minutesLeft").fadeTo(100, 0.1).fadeTo(200, 1.0);
            }, 1000);
            Dataholdingservice.setAnimationId(animationTimerId);
            Dataholdingservice.setMinutesLeft(timer);
            $scope.closePopover();
            $scope.countDown();

        }
    };

    $scope.clearCountDownAnimation = function() {
        $("#minutesLeft").clearQueue().finish();
        // Clear previously set animations
        console.log(Dataholdingservice.getAnimationId());
        if (Dataholdingservice.getAnimationId() != null) {
          console.log("Interval cleared");
          clearInterval(Dataholdingservice.getAnimationId());
        }
    };

    $scope.countDown = function() {
            var minutesLeft = Dataholdingservice.getMinutesLeft();
            $scope.minutesLeft = minutesLeft;
            $scope.isCounterDisplayed = Dataholdingservice.isCounterDisplayed();
            var timerId = setInterval(function() {
            console.log("Counting down");
            minutesLeft -- ;
            console.log("Decreasing minutes");
            console.log(minutesLeft);
            Dataholdingservice.setMinutesLeft(minutesLeft);
            console.log("minutes left " + Dataholdingservice.getMinutesLeft());
            $scope.$apply(function () {
              $scope.minutesLeft = Dataholdingservice.getMinutesLeft();
            });

              if(minutesLeft <= 0) {
                  console.log("Time left");
                  clearInterval(Dataholdingservice.getTimerId());
                  clearInterval(Dataholdingservice.getAnimationId());
                  console.log(Dataholdingservice.isCounterDisplayed());
                  $scope.hideCounter();
                  $scope.stopAllSelectedSounds();
              }

            }, 1000 * 1);

            Dataholdingservice.setTimerId(timerId);
    };

    $scope.hideCounter  = function() {
        console.log("Hidding the counter");
        $scope.isCounterDisplayed = false;
        $scope.$apply();
    };

    $scope.cancelTimer = function() {
        clearInterval(Dataholdingservice.getTimerId());
        clearInterval(Dataholdingservice.getAnimationId());
        $("#minutesLeft").hide();
        $ionicLoading.show({
          duration: 500,
          template: 'Timer canceled'
        });
    };

Answer 1

由於$scope.minutesLeft是原始數據類型，因此控制器中發生的更改有時不會反映在視圖中。 您可以創建一個像$scope.viewModel = {}這樣的對象，然后在您的倒計時函數$scope.viewModel.minutesLeft = mintesLeft作為屬性添加到$scope.viewModel.minutesLeft = mintesLeft ，並將viewModel.minutesLeft綁定到視圖。 您應該看到正確更新的值。

我不確定您的具體要求，但我已經將用於創建簡單計時器的代碼放在一起，該計時器在角度服務中在后台運行。 工作代碼可在http://codepen.io/svswaminathan/pen/MYXOPM獲得