按鈕功能為：點擊“獲取驗證碼”――按鈕不可用-設置倒計時-60秒后重新獲取。
主要實現原理：點擊后，設置一個$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）點擊之后
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
