按钮功能为：点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。

代码借鉴于：http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p=preview

主要实现原理：点击后，设置一个$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）点击之后

　　

干货：

<html  ng-app="myApp">

	<head>

		<title>测试_短信验证码</title>

		<meta charset="utf-8" />

	</head>

	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/>

	<body>

		<timerbutton show-timer="false">获取验证码</timerbutton>

	</body>

</html>

<script>

	angular.module('myApp',[]).directive('timerbutton', function($timeout, $interval){

    return {

        restrict: 'AE',

        scope: {

            showTimer: '=',

            timeout: '='

        },

        link: function(scope, element, attrs){

            scope.timer = false;

            scope.timeout = 60000;

            console.log("1-进来了");

            scope.timerCount = scope.timeout / 1000;

            scope.text = "获取验证码";

            scope.onClick = function(){

            	console.log("2-进来了");

                scope.showTimer = true;

                scope.timer = true;

                scope.text = "秒后重新获取";

                var counter = $interval(function(){

                    scope.timerCount = scope.timerCount - 1;

                    console.log("3-进来了");

                }, 1000);

                $timeout(function(){

                	console.log("进来了");

                    scope.text = "获取验证码";

                    scope.timer = false;

                    $interval.cancel(counter);

                    scope.showTimer = false;

                    scope.timerCount = scope.timeout / 1000;

                }, scope.timeout);

            }

        },

        template: '<button ng-click="onClick()" class="btn btn-primary" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'

    };

});

</script>

　　

前端学习——ionic/AngularJs——获取验证码倒计时按钮的更多相关文章

  1. Android中注册获取验证码倒计时按钮

    public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...

  2. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  3. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

  4. Android 获取验证码倒计时实现

    Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  5. angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决

    封装$http.做权限时拦截403等状态及获取验证码倒计时: 拦截接口返回状态 var app = angular.module('app'); app.factory('UserIntercepto ...

  6. clips 前端 js 倒计时 获取验证码的按钮

    <a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-def ...

  7. js点击按钮获取验证码倒计时

    //发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...

  8. android学习小例子——验证码倒计时按钮

    1.activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro ...

  9. iOS开发之--获取验证码倒计时及闪烁问题解决方案

    大家在做验证码的时候一般都会用到倒计时,基本上大家实现的方式都差不多,先贴出一些代码来.. -(void)startTime{ __block ; //倒计时时间 dispatch_queue_t q ...

随机推荐

  1. ubuntu12.04 内核编译 记录

    近期学习linux这门课,做实验要编译系统内核,然后..五一没事就捣鼓了一上午,还好成功了,以下就写下过程吧. 注意:以下过程的有些make 这类的命令 可能要获取权限 1.開始时能够查一下自己如今系 ...

  2. javascript 学习总结（一）

    1.字符转换 var s1 = "01"; var s2 = "1.1"; var s3 = "z";//字母'z'无法转换为数字,所以或返 ...

  3. cocos2d的-X- luaproject的LUA脚本加密

    2014/1/26 更新 近期又发现了一个非常easy的方法,事实上coco2dx已经给我们提供设置loader的方法. 注意:有个局限性,在非android平台下调用pEngine->exec ...

  4. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  5. ASP.NET MVC应用程序处理并发

    为ASP.NET MVC应用程序处理并发 2014-05-14 08:37 by Bce, 694 阅读, 2 评论, 收藏, 编辑 这是微软官方教程Getting Started with Enti ...

  6. TDD中的单元测试

    TDD中的单元测试写多少才够?   测试驱动开发(TDD)已经是耳熟能详的名词,既然是测试驱动,那么测试用例代码就要写在开发代码的前面.但是如何写测试用例?写多少测试用例才够?我想大家在实际的操作过程 ...

  7. Mac OS X安装之虚拟机环境下的总结

    最近一直忙着公司iOS Touch的新版发布,终于忙过了.现在,又开始了新的阶段,不过算是轻松了很多.回来一看,自己的博客空空如也,实在受不了了.于是,开始更一下吧,哈哈. 这个文档是我几个月前,开始 ...

  8. 获取时间SQL函数语句

    1.获取时间 获取当天的数据 where  DATEDIFF (DD, 数据库中时间的字段 ,GETDATE())=0 查询24小时内的 where  DATEDIFF (HH, 数据库中时间的字段 ...

  9. 【转载】Stack Overflow: The Architecture - 2016 Edition

    转载:http://www.infoq.com/cn/news/2016/03/Stack-Overflow-architecture-insi?utm_source=tuicool&utm_ ...

  10. C/C++ 中 const 修饰符用法总结

    C/C++ 中 const 修饰符用法总结 在这篇文章中,我总结了一些C/C++语言中的 const 修饰符的常见用法,供大家参考. const 的用法,也是技术性面试中常见的基础问题,希望能够帮大家 ...