求大神：angularJS中倒计时60秒的按钮如何写？

leftstick

27.3k33329

发布于
2015-12-17

King

1.5k115166

更新于
2016-08-17

✓ 已被采纳

我写的略多一点，plunker，是一个directive

index.html

<!DOCTYPE html>
<html ng-app="demo">

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-controller="DemoCtrl">
    <h1>Hello Plunker!</h1>
    
    
    <timerbutton show-timer="true" timeout="time">Hello There</timerbutton>

  <script src="script.js"></script>
  </body>
</html>

script.js

// Code goes here

var demo = angular.module('demo', []);

demo.controller('DemoCtrl', function($scope){
  $scope.time = 6000;
});

demo.directive('timerbutton', function($timeout, $interval){
  return {
    restrict: 'AE',
    transclude: true,
    scope: {
      showTimer: '=',
      onClick: '&',
      timeout: '='
    },
    link: function(scope, element, attrs){
      scope.timer = true;
      scope.timerCount = scope.timeout;
      var counter = $interval(function(){
        scope.timerCount = scope.timerCount - 1000;
      }, 1000);
      
      $timeout(function(){
         scope.timer = false;
         $interval.cancel(counter);
         scope.showTimer = false;
      }, scope.timeout);
    },
    template: '<button ng-click="onClick()" ng-disabled="timer"><span ng-transclude></span>&nbsp<span ng-if="showTimer">({{ timerCount / 1000 }}s)</span></button>'
  };
});

这波能反杀

12.6k51637

发布于
2015-12-17


angular.module('myapp', [])
  .controller('demoController', ['$scope', '$interval', function($s, $i) {
    $s.time = 60;
    var timer = null;
    timer = $i(function(){
        $s.time = $s.time - 1;
        if($s.time === 0) {
            $i.cancel(timer);
        }
    }, 1000);
}]);