前端學習——ionic/AngularJs——獲取驗證碼倒計時按鈕

按鈕功能為：點擊“獲取驗證碼”——按鈕不可用-設置倒計時-60秒后重新獲取。

代碼借鑒於：http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p=preview

主要實現原理：點擊后，設置一個$interval，每一秒更改一次剩余時間，並依賴Angular數據綁定實時顯示在頁面中。設置一個$timeout，60秒后將按鈕初始化到可用狀態。

實現代碼：

（1）js代碼，設置成一個directive以便多次調用。

angular.module('winwin').directive('timerbutton', function($timeout, $interval){
    return {
        restrict: 'AE',
        scope: {
            showTimer: '=',
            timeout: '='
        },
        link: function(scope, element, attrs){
            scope.timer = false;
            scope.timeout = 60000;
            scope.timerCount = scope.timeout / 1000;
            scope.text = "獲取驗證碼";

            scope.onClick = function(){
                scope.showTimer = true;
                scope.timer = true;
                scope.text = "秒后重新獲取";
                var counter = $interval(function(){
                    scope.timerCount = scope.timerCount - 1;
                }, 1000);

                $timeout(function(){
                    scope.text = "獲取驗證碼";
                    scope.timer = false;
                    $interval.cancel(counter);
                    scope.showTimer = false;
                    scope.timerCount = scope.timeout / 1000;
                }, scope.timeout);
            }
        },
        template: '<button on-tap="onClick()" class="button button-calm xgmm-btn" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'
    };
});

（2）html代碼

 <timerbutton show-timer="false">獲取驗證碼</timerbutton>

實現效果：

（1）點擊之前

　　

（2）點擊之后