ionic+AngularJs如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕

小編給大家分享一下ionic+AngularJs如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

按鈕功能為：點(diǎn)擊“獲取驗(yàn)證碼”——按鈕不可用-設(shè)置倒計(jì)時(shí)-60秒后重新獲取。

主要實(shí)現(xiàn)原理：點(diǎn)擊后，設(shè)置一個(gè)$interval，每一秒更改一次剩余時(shí)間，并依賴Angular數(shù)據(jù)綁定實(shí)時(shí)顯示在頁(yè)面中。設(shè)置一個(gè)$timeout，60秒后將按鈕初始化到可用狀態(tài)。

實(shí)現(xiàn)代碼：

（1）js代碼，設(shè)置成一個(gè)directive以便多次調(diào)用。

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 = "獲取驗(yàn)證碼";

      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 = "獲取驗(yàn)證碼";
          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">獲取驗(yàn)證碼</timerbutton>

實(shí)現(xiàn)效果：

（1）點(diǎn)擊之前

（2）點(diǎn)擊之后

以上是“ionic+AngularJs如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！