在js和html加載期間，如何在加載html和js時使用angularjs加載加載器

Question

。我必須裝載裝載機。所以我可以實現任何想法。

如何讓AngularJS顯示加載微調器直到數據加載完成？

當前數據來自本地數組。

Answer 1

你可以做一個指令，注入有http服務，並觀看其請求未決：

(function() { 
    'use strict'; 
    angular 
     .module('yourApp') 
     .directive('loader', loader); 

    /** 
    * Defines loading spinner behaviour 
    * 
    * @param {obj} $http 
    * @returns {{restrict: string, link: Function}} 
    */ 
    function loader($http) { 
     return { 
      restrict: 'A', 
      link: function(scope, element, attributes) { 
       scope.$watch(function() { 
        return $http.pendingRequests.length; 
       }, function(isLoading) { 
        if (isLoading) { 
         $(element).show(); 
        } else { 
         $(element).hide(); 
        } 
       }); 
      } 
     }; 
    } 
})(); 

並使用它：

<span class="spinner" data-loader></span> 

Answer 2

默認情況下，您可以簡單地在加載圖像時添加一個「隱藏」類，並在ng-click上刪除「隱藏」。獲得成功後，您可以再次添加「隱藏」類。我認爲它沒什麼大不了的。