Question

我在＆＃34; First＆＃34;中有以下代码：我的应用程序的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 = {}这样的对象，然后在您的倒计时函数中将minutesLeft作为属性添加到$scope.viewModel.minutesLeft = mintesLeft，并将viewModel.minutesLeft绑定到视图。您应该看到值正确更新。

我不确定您的确切要求，但我已经将用于创建简单计时器的代码放在一起，该计时器在角度服务中在后台运行。工作代码位于http://codepen.io/svswaminathan/pen/MYXOPM

AngularJS + Ionic在从第二页返回主页后截断范围值。

1 个答案: