सकते हैं एनजी शो निर्देश देरी

Question

साथ प्रयोग किया जा रहा एक स्पिनर इस ng-show="loading>0"

साथ दिखाया गया है है वहाँ एक तरह से मैं एक देरी (जैसे कि 1 सेकंड) के साथ इस स्पिनर को प्रदर्शित कर सकता है?

मैं टाइमआउट का उपयोग नहीं कर सकता क्योंकि कई अनुरोधों को लोड करने वाले काउंटर सिंक से बाहर हो जाएंगे।

क्या मैं जरूरत सीएसएस संक्रमण या इसी तरह के माध्यम से ng-show पर एक देरी

Answer 1

यहाँ एक सरल तरीका है कि मेरी जरूरतों के लिए काम किया है। आपकी कार्यवाही के आधार पर, आप तत्व को setDelay() फ़ंक्शन करेंगे। उदाहरण के लिए, मेरे मामले में मैंने एक चयनित इनपुट में setDelay() बांध दिया।

उत्प्रेरक HTML:

<select class="first-option" 
    ng-change="setDelay()" 
    ng-options="o.label for o in download.options" 
    ng-model="optionModel" required> 
</select> 

अपने नियंत्रक में, एक साधारण समारोह setDelay कि झंडा $scope.delay बदल जाएगा जोड़ें:

$scope.setDelay = function(){ 
    $scope.delay = true; 
    $timeout(function(){ 
     $scope.delay = false; 
    }, 200); 
}; 

फिर, आप बस ng- में एक ध्वज के रूप में उपयोग कर सकते हैं $scope.delay शो:

<div class="loading-div" ng-show="delay"> 
    <img src="loading_spinner.gif"> 
</div> 

और सामग्री को दिखाएं Ter किया लोड हो रहा है:

<div ng-show="!delay"> 
    Content is loaded. 
</div> 

अब, हर बार उपयोगकर्ता लटकती मेनू में एक नया मान का चयन करता है, यह $scope.delay ट्रिगर किया जाएगा स्पिनर को दिखाने के लिए पैदा कर रहा true लिए सेट किया जा करने के लिए, और जब यह 200 तक पहुँच जाता है, यह हो जाएगा स्पिनर को छिपाने के कारण false पर सेट करें।

Answer 2

मेरे संदेह है कि आप एक सामान्य प्रयोजन स्पिनर कि एक देरी शामिल की तलाश कर रहे है। मानक, 200ms या उसके जैसा कुछ के बाद दिखाएं।

यह निर्देश के लिए एक आदर्श उम्मीदवार है, और वास्तव में इसे पूरा करने में काफी आसान है।

मुझे पता है कि यह एक लंबा कोड उदाहरण है, लेकिन प्राथमिक टुकड़ा निर्देश है। यह बहुत आसान है।

कुछ कॉन्फ़िगर करने योग्य देरी के बाद कुछ स्कोप चर और शो सुनें। यदि ऑपरेशन देरी से अधिक समय लेता है, तो यह अभी रद्द हो जाएगा और कभी दिखाई नहीं देगा।

(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); 
 

 
}());

<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>

Answer 3

मुझे लगता है कि एक शुद्ध सीएसएस समाधान इसे करने का सबसे अच्छा तरीका है।

यहां एक plunker दिखा रहा है कि यह कैसे करें। संक्रमण के लिए एनजी-एनिमेट कक्षाओं का उपयोग करना और 10 एमएमएस के संक्रमण के साथ एक संक्रमण विलंब लागू करना (0 एस संक्रमण सीएसएस के साथ काम नहीं कर रहा है)।कोड की

प्रासंगिक हिस्सा:

.your-element-class.ng-hide { 
    opacity: 0; 
} 

.your-element-class.ng-hide-add, 
.your-element-class.ng-hide-remove { 
    transition: all linear 0.01s 1s; 
} 

एकमात्र कारण यह विभिन्न देरी मूल्य के साथ अपने कोड में कई बार इस टन का उपयोग करेंगे के लिए एक कस्टम निर्देश उपयोग करने के लिए। एक कस्टम निर्देश देरी समय के साथ अधिक लचीलापन की अनुमति देता है।