Front End Learning--ionic/angularjs--Get Verification Code Countdown button

button function: Click "Get Verification Code"--the button is not available-set the countdown-60 seconds after the re-acquisition.

Code reference to: Http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p=preview

Main principle of implementation: After clicking, set a $interval, change the time remaining every second, and rely on angular data binding in real-time display in the page. Sets a $timeout,60 seconds after the button is initialized to the available state.

Implementation code:

(1) JS code, set to a directive for multiple calls.

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 = "Get Verification Code";                Scope.onclick = function () {Scope.showtimer = true;                Scope.timer = true;                Scope.text = "Re-acquired after second";                var counter = $interval (function () {scope.timercount = scope.timercount-1;                }, 1000);                    $timeout (function () {Scope.text = "Get Verification Code";                    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 code

<timerbutton show-timer= "False" > Get Verification Code </timerbutton>

　　

Implementation results:

(1) before clicking

　　

(2) after clicking

　　

Front End Learning--ionic/angularjs--Get Verification Code Countdown button