Question

我正在构建一个简单的番茄钟计时器，并且仍处于学习Angular的早期阶段。我无法使用$ scope.timeView变量每秒更新视图。 $ scope.timeView每秒都会记录到控制台，但不是视图。我尝试过注入$ interval并使用apply（），但是它们没有用。我确信这对于训练有素的眼睛是显而易见的，我会一直在寻找。在此期间，我们将非常感谢任何帮助。感谢。

  pomodoro_timer.controller('app.controller', ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) {

  // (function() {
  var intrvl;
  var t = 1500;
  var tDiv = $('#time');


  $scope.startTimer = function() {
    if (tDiv.hasClass("notWorking")) {
      $scope.interval(t);
      $scope.toggleClass();
    }
  };

  $scope.interval = function() {
    intrvl = setInterval(function(){
    t -= 1;
    $scope.displayTime(t)
    },1000)
  }

  $scope.displayTime = function() {
    var m = parseInt(t / 60);
    var s = parseInt(t) % 60;

    if (s < 10) {
      s = "0" + s;
    }
     $scope.timeView = m+":"+s;
  }

  $scope.stopStart = function() {
    if (tDiv.hasClass('working')) {
      $scope.toggleClass();
      clearInterval(intrvl);
      $('#QwkBreak a').text('Continue Working');        //////////////////////Should I remove jQuery?/////////////////////////
    } else if (t<1500) {          // prevents timer from starting when '#QwkBreak' is clicked, unless timer has started counting down //
      $('#QwkBreak a').text('Quick Break');
      $scope.interval();
      $scope.toggleClass();
    }
  }

  $scope.toggleClass = function() {
    tDiv.toggleClass('notWorking working');
  }

   $scope.resetTimer = function() {
    if (!tDiv.hasClass('notWorking')) {         //prevents reset button from toggling classes unless (class="working") //
      clearInterval(intrvl);
      t = 1500;
      tDiv.text("25:00");
      $scope.toggleClass();
    }
  }

// })();s
}]);




<body ng-controller="app.controller">
  <h1>Pomodoro Timer</h1>
  <div id="timeView">
    <p id="time" class="notWorking">{{ timeView }}</p>
  </div>
    <div id="controls">
      <button id="startWork"><a ng-click="startTimer()" href="#">Start Work</a></button>
      <button id="QwkBreak"><a ng-click="stopStart()" href="#">Quick Break</a></button>
      <button id="reset"><a ng-click="resetTimer()" href="#">Reset</a></button>
      <button id="5_MInBreak">5-Min Break</button>
    </div>
  </div>

Answer 1

Angular拥有QStackedWidget服务，内部将管理摘要，并允许使用$interval方法轻松摆脱计时器

cancel()

现在，您还希望在范围被销毁时从窗口中删除该间隔计时器

$scope.interval = function() {
    intrvl = $interval(function(){
    t -= 1;
    $scope.displayTime(t)
    },1000)
  }

您还需要在控制器中注入$scope.$on('$destroy', function(){ intrvl.cancel(); });

还建议将所有这些与计时器相关的代码放在一个指令中。控制器不应该包含任何与dom相关的代码

参考：$interval docs

使用$ interval更新视图

1 个答案: