Question

我正在尝试使用AngularJS和 $ interval服务创建一个倒计时器。

我成功地创造了一种显示时间的方法，并且从25分钟开始成功倒计时到0。

但是我发现很难在函数范围内激活$ interval？ 换句话说，我只是在调用存储它的函数时才尝试使用$ interval。

在此代码段中，计时器在页面加载时启动。

<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script><!-- AngularJS -->
    <script>
        var myapp = angular.module('MyApp', []);
        myapp.controller('timer',['$scope', '$interval', function($scope, $interval){


          $scope.starttime = 1500000; // 25min in ms
          $scope.format = 'mm:ss'; //minutes and seconds format 

           $interval(function(){
              $scope.starttime;
              $scope.starttime -=1000; //starttime is equal to starttime - 1 second
              /*if($scope.starttime === 0){
                $scope.starttime = 1500000;
              }
              */
            },1000);
            //return start;
          //}; //end starttimer function

          $scope.killtimer = function(){

          }


        }]);

    </script>
  </head>

  <body ng-app="MyApp">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h1 ng-controller="timer">{{ starttime | date:format}}</h1> <!-- start time with format filter -->
          <button class="btn btn-primary" ng-click="starttimer()">Start</button>
          <button class="btn btn-danger" ng-click="killtimer()">End Timer</button>
        </div>
      </div>
    </div>


  </body>
</html>

但是我想在$ scope.starttimer函数中包含$ interval，所以我可以用ng-click和DOM上的按钮来调用它。这是我在该版本上的失败尝试。

<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script><!-- AngularJS -->
    <script>
        var myapp = angular.module('MyApp', []);
        myapp.controller('timer',['$scope', '$interval', function($scope, $interval){

          $scope.starttime = 1500000; // 25min in ms
          $scope.format = 'mm:ss'; //minutes and seconds format 
          $scope.starttimer = function($scope){
           $interval(function(){
              $scope.starttime;
              $scope.starttime -=1000; //starttime is equal to starttime - 1 second
              /*if($scope.starttime === 0){
                $scope.starttime = 1500000;
              }
              */
            },1000);
            //return start;
          //}; //end starttimer function

          $scope.killtimer = function(){

          }


        }]);

    </script>
  </head>

  <body ng-app="MyApp">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h1 ng-controller="timer">{{ starttime | date:format}}</h1> <!-- start time with format filter -->
          <button class="btn btn-primary" ng-click="starttimer()">Start</button>
          <button class="btn btn-danger" ng-click="killtimer()">End Timer</button>
        </div>
      </div>
    </div>


  </body>
</html>

这个版本不起作用。 AngularJS打破!! ??不知道为什么。

以下是指向plnkr

的链接

Answer 1

几个问题：

主要的一个是按钮不在控制器的范围内。您将ng-controller放在标题标记上。将ng-controller移至包含该按钮的更高级别。

缺少右括号}

在区间

中删除$scope.starttime;

的 DEMO

Answer 2

您只能在ng-click上调用控制器范围内定义的那些函数。

函数starttimer()和killtimer()在控制器timer中定义，但它们不在ng-controller 所包含的块内（请注意在ng-controller上使用了<h1>，这是您可以使用这些功能的唯一地方。）

只需将ng-controller移动到也涵盖两个按钮的元素

  <body ng-app="MyApp" ng-controller="timer">
    <div class="container">
      <div class="row"> 
        <div class="col-sm-12">
          <h1 >{{ starttime | date:format}}</h1> <!-- start time with format filter -->
          <button class="btn btn-primary" ng-click="starttimer()">Start</button>
          <button class="btn btn-danger" ng-click="killtimer()">End Timer</button>
        </div>
      </div>
    </div>
  </body>

此外，您没有正确关闭$scope.starttimer()功能。确保取消注释行}; //end starttimer function

  $scope.starttimer = function(){
    alert('started')
   $interval(function(){
      $scope.starttime;
      $scope.starttime -=1000; //starttime is equal to starttime - 1 second
      /*if($scope.starttime === 0){
        $scope.starttime = 1500000;
      }
      */
    },1000);
    //return start;
  }; //end starttimer function

这是更新的plunkr

使用ng-click功能激活$ interval

2 个答案: