Kann ng-show Direktive verwendet werden, mit einer Verzögerung

Mein Verdacht ist, dass Sie sind auf der Suche für ein Allzweck-spinner, beinhaltet eine Verzögerung. Der standard, zeigen nach 200ms oder sowas.

Dies ist ein perfekter Kandidat für eine Richtlinie, und eigentlich Recht einfach zu bewerkstelligen.

Ich weiß, das ist ein langer code-Beispiel, aber der primäre Teil ist die Richtlinie. Es ist ziemlich einfach.

Hören Sie ein paar scope-Variablen und zeigt nach einer konfigurierbaren Verzögerung. Wenn der Vorgang dauert länger als die Verzögerungszeit, wird es einfach abgebrochen und nie auftauchen.

JS:

(function() {
  'use strict';

  function SpinnerDirective($timeout) {
    return {
      restrict: 'E',
      template: '<i class="fa fa-cog fa-spin"></i>',
      scope: {
        show: '=',
        delay: '@'
      },
      link: function(scope, elem, attrs) {
        var showTimer;

        //This is where all the magic happens!
        //Whenever the scope variable updates we simply
        //show if it evaluates to 'true' and hide if 'false'
        scope.$watch('show', function(newVal){
          newVal ? showSpinner() : hideSpinner();
        });
        
        function showSpinner() {
          //If showing is already in progress just wait
          if (showTimer) return;

          //Set up a timeout based on our configured delay to show
          //the element (our spinner)
          showTimer = $timeout(showElement.bind(this, true), getDelay());
        }

        function hideSpinner() {
          //This is important. If the timer is in progress
          //we need to cancel it to ensure everything stays
          //in sync.
          if (showTimer) {
            $timeout.cancel(showTimer);
          }

          showTimer = null;

          showElement(false);
        }

        function showElement(show) {
          show ? elem.css({display:''}) : elem.css({display:'none'});
        }

        function getDelay() {
          var delay = parseInt(scope.delay);

          return angular.isNumber(delay) ? delay : 200;
        }
      }
    };
  }

  function FakeService($timeout) {
    var svc = this,
      numCalls = 0;

    svc.fakeCall = function(delay) {
      numCalls += 1;

      return $timeout(function() {

        return {
          callNumber: numCalls
        };

      }, delay || 50);
    };
  }

  function MainCtrl(fakeService) {
    var vm = this;

    vm.makeCall = function(delay) {
      vm.isBusy = true;
      fakeService.fakeCall(delay)
        .then(function(result) {
          vm.result = result;
        }).finally(function() {
          vm.isBusy = false;
        });
    }
  }

  angular.module('spinner', [])
    .service('fakeService', FakeService)
    .controller('mainCtrl', MainCtrl)
    .directive('spinner', SpinnerDirective);

}());

HTML:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

<div class="container" ng-app="spinner">
  <div class="row" ng-controller="mainCtrl as ctrl">
    <div class="col-sm-12">
      <h2>{{ctrl.result | json}}
        <spinner show="ctrl.isBusy" delay="200"></spinner>
      </h2>
      <button type="button" 
              class="btn btn-primary" 
              ng-click="ctrl.makeCall(2000)" 
              ng-disabled="ctrl.isBusy">Slow Call
      </button>
      <button type="button" 
              class="btn btn-default" 
              ng-click="ctrl.makeCall()" 
              ng-disabled="ctrl.isBusy">Fast Call
      </button>
    </div>
  </div>
</div>