thể ng-show chỉ được sử dụng với một sự chậm trễ

Question

Tôi có một spinner này được hiển thị với ng-show="loading>0"

Có cách nào tôi có thể hiển thị spinner này với một sự chậm trễ (nói 1 giây)?

Tôi không thể sử dụng hết thời gian chờ vì với nhiều yêu cầu tải bộ đếm sẽ bị mất đồng bộ.

Những gì tôi cần là một sự chậm trễ trên ng-show qua chuyển css hoặc tương tự

Answer 1

Dưới đây là một cách tiếp cận đơn giản hơn mà làm việc cho các nhu cầu của tôi. Tùy thuộc vào hành động của bạn, bạn sẽ kết hợp hàm setDelay() với phần tử. Ví dụ, trong trường hợp của tôi, tôi gắn setDelay() vào đầu vào được chọn.

kích hoạt HTML:

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

Trong điều khiển của bạn, thêm một chức năng đơn giản setDelay đó sẽ thay đổi cờ $scope.delay:

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

Sau đó, bạn chỉ có thể sử dụng $scope.delay như một lá cờ trong ng- hiển thị:

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

Và hiển thị nội dung af ter thực hiện tải:

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

Bây giờ, mỗi khi người sử dụng chọn một giá trị mới trong trình đơn thả xuống, nó sẽ kích hoạt $scope.delay được thiết lập để true gây ra spinner để hiển thị, và khi nó đạt đến 200, nó sẽ được thiết lập để false làm cho spinner để ẩn.

Answer 2

nghi ngờ của tôi là bạn đang tìm kiếm một spinner mục đích chung trong đó bao gồm một sự chậm trễ. Các tiêu chuẩn, hiển thị sau 200ms hoặc một cái gì đó như thế.

Đây là ứng cử viên hoàn hảo cho chỉ thị và thực sự khá dễ thực hiện.

Tôi biết đây là một ví dụ mã dài, nhưng phần chính là chỉ thị. Nó khá đơn giản.

Nghe một vài biến và phạm vi phạm vi sau một số độ trễ có thể định cấu hình. Nếu hoạt động mất nhiều thời gian hơn sự chậm trễ, nó sẽ chỉ bị hủy và không bao giờ hiển thị.

(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

Tôi nghĩ rằng một giải pháp CSS tinh khiết là cách tốt nhất để làm điều đó.

Đây là số plunker cho biết cách thực hiện. Sử dụng các lớp ng-animate cho quá trình chuyển đổi và áp dụng độ trễ chuyển tiếp với chuyển đổi 10ms (chuyển đổi 0s không hoạt động với css).

phần có liên quan của mã:

.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; 
} 

Lý do duy nhất để sử dụng một chỉ thị tùy chỉnh cho nó sẽ được sử dụng tấn này lần trong mã của bạn có giá trị chậm trễ khác nhau. Một chỉ thị tùy chỉnh cho phép linh hoạt hơn với thời gian trễ.