为什么我的 AngularJS 取消间隔不起作用

Question

我想在按下停止计时器时停止倒计时。我不确定为什么这不起作用。我有一个简单的 jsfiddle 设置 here。

代码
查看

<div ng-app="timerApp" ng-controller="timerController">
    <h4>Time Remaining: {{countdown}}</h4>
    <button ng-click="startTimer()">Start Timer</button>
    <button ng-click="stopTimer()">Stop Timer</button>
</div>

控制器

angular.module('timerApp', ['timerApp.controllers']);
angular.module('timerApp.controllers', []).controller('timerController', ['$scope', '$interval', function ($scope, $interval) {
    var timer;
    var time = 10;
    $scope.countdown = time;

    $scope.stopTimer = function() {
        $interval.cancel(timer);
    };

    $scope.startTimer = function() {
        timer = $interval(function() {
           $scope.countdown--;
        }, 1000, time).then(function() {
            $scope.countdown = time;
        });
    };

}]);

Answer 1

问题是调用 then 返回一个新的承诺，而不是 $interval 返回的承诺，这是 $interval.cancel() 方法所要求的

angular.module('timerApp', ['timerApp.controllers']);
angular.module('timerApp.controllers', []).controller('timerController', ['$scope', '$interval',
  function($scope, $interval) {
    var timer;
    var time = 10;
    $scope.countdown = time;

    $scope.stopTimer = function() {
      $interval.cancel(timer);
    };

    $scope.startTimer = function() {
      timer = $interval(function() {
        $scope.countdown--;
      }, 1000, time);
      timer.then(function() {
        $scope.countdown = time;
      });
    };

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="timerApp" ng-controller="timerController">
  <h4>Time Remaining: {{countdown}}</h4>
  <button ng-click="startTimer()">Start Timer</button>
  <button ng-click="stopTimer()">Stop Timer</button>
</div>