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获得