Ionic + AngularJs implements the countdown button for obtaining verification codes. ionicangularjs

Ionic + AngularJs implements the countdown button for obtaining verification codes. ionicangularjs

The button function is as follows: click "get verification code" -- the button is unavailable-set countdown-60 seconds and then get it again.

Main implementation principle: Click and set a $ interval to change the remaining time every second, and the dependency on Angular Data Binding is displayed on the page in real time. Set a $ timeout. After 60 seconds, initialize the button to the available status.

Implementation Code:

(1) js Code, set to a direve VE for multiple calls.

Angular. module ('winwin '). directive ('timer', 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 = "get again in seconds"; 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-calm xgmm-btn "ng-disabled =" timer "> <span ng-if =" showTimer ">{{ timerCount }}</span> {{text }}</button> '};});

(2) html code

<Timerbutton show-timer = "false"> obtain the Verification Code </timerbutton>

Effect:

(1) Before clicking

　　

(2) After clicking

　　　

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.