使用 ng-click 函数激活 $interval

Posted

技术标签:

【中文标题】使用 ng-click 函数激活 $interval【英文标题】：activate $interval with an ng-click function 【发布时间】：2015-07-16 19:01:53 【问题描述】：

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

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

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

在这段代码 sn-p 中，计时器在页面加载时启动。

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

但是，我想将 $interval 包装在 $scope.starttimer 函数中，这样我就可以使用 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的链接

【问题讨论】：

plnkr 中断，因为不应注释此行：//; //end starttimer function。 【参考方案1】：

几个问题：

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

缺少右大括号

删除区间内的$scope.starttime;

DEMO

【讨论】：

简短而准确的答案+1。你打败了我几秒钟 :D @charlietfl 非常感谢您的解释和演示。完全有道理。谢谢：D【参考方案2】：

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

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

只需将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

【讨论】：

感谢@NLN 检查我的错误？我刚刚检查了您的解决方案。我现在明白我做错了什么。谢谢你的解释。

以上是关于使用 ng-click 函数激活 $interval的主要内容，如果未能解决你的问题，请参考以下文章

ngDraggable 在拖动结束后避免 ng-click

AngularJS 使用 ng-click 调用控制器内的函数

AngularJS 将字符串作为函数传递给 ng-click

ng-repeat 中的表单名称并将 ng-click 函数中的表单名称传递给 javascript

ng-click 事件不适用于 ocLazyLoad

如何从 html ng-click 调用链接函数方法？