本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮，具有一定的参考价值，有兴趣的可以了解一下。
按钮功能为：点击“获取验证码”――按钮不可用-设置倒计时-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: '' }; }); （2）html代码
获取验证码
实现效果：
（1）点击之前
（2）点击之后
以上就是ionic+AngularJs实现获取验证码倒计时按钮的详细内容，更多请关注易知道|edz.cc其它相关文章！
