如何在取出數據和呈現任務完成之前顯示加載popop

Question

我有一個將調用search_hotels方法的頁面。

服務器返回JSON應該等待2秒左右。

而返回的JSON的大小包含2個項目。

它還需要2〜3秒來處理和渲染所有項目與ng重複。

什麼更好的做法來顯示加載窗口告訴人們等待？

 function search_hotels(q_param) { 
      roomSkuService.search(q_param).$promise.then(function(resp) { 
       _.each(resp, function(item) { 
        var region = item.hotel.region; 
        if ($scope.region.list.indexOf(region) < 0) { 
         $scope.region.list.push(region) 
        } 
       }); 

       $scope.hotels = _.groupBy(resp, function(row) { 
        return row.hotel_id; 
       }); 
      }); 
     } 

Answer 1

我建議你在渲染完成後使用$ timeout來隱藏加載窗口。

function search_hotels(q_param) { 
      //show the loading window 
      roomSkuService.search(q_param).$promise.then(function(resp) { 
       _.each(resp, function(item) { 
        var region = item.hotel.region; 
        if ($scope.region.list.indexOf(region) < 0) { 
         $scope.region.list.push(region) 
        } 
       }); 

       $scope.hotels = _.groupBy(resp, function(row) { 
        return row.hotel_id; 
       }); 

       //execute after rendering 
       $timeout(function(){ 
        //hide loading window 
       },0); 
      }); 
     }