按鈕功能為：點擊“獲取驗證碼”——按鈕不可用-設置倒計時-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）點擊之後
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。