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