如何在資源完整獲取數據時顯示div

Question

我有一家工廠，致電首頁新聞我想在$資源仍在處理時進行預加載div。

這是我的，服務文件

(function() { 
     var newsServices; 

     newsServices = angular.module("newsServices", ["ngResource"]); 

     newsServices.factory("HomeNews", [ 
     //I want to display a div when it's loading 
     "$resource", function($resource) { 
      return $resource("http://128.1.1.176/webservice/get_news_for_home.php?wscreen=" + windowWidth, {}, { 
      query: { 
       method: "GET", 
       isArray: false 
     //And I want to Hide the div when it's completed 
      } 
      }); 
     } 
     ]); 

    }).call(this); 

這是我的，控制器的文件

(function() { 
    "use strict"; 
    var newsControllers; 

    newsControllers = angular.module("newsControllers", []); 

    newsControllers.controller("HomeNewsListCtrl", [ 
    "$scope", "HomeNews", "$location", function($scope, HomeNews, $location) { 
     $scope.news = HomeNews.query(); 
     return $scope.go = function(path) { 
     return $location.path(path); 
     }; 
    } 
    ]); 

}).call(this); 

Answer 1

我從你的問題不解的是，你想會出現一個加載GIF當你的應用與外部服務通信時，

我會sa y使用指令，說加載，然後：

<loading></loading> 

再定義一個指令：

app.directive('loading', function() { 
     return { 
     restrict: 'E', 
     replace:true, 
     template: '<div ng-show="loading"><img src="path/to/loading.gif"/>Loading...</div>', 
     } 
    }); 

那麼當你通常會有一個控制器，你會用你的服務，使用服務之前，定義負載是真實的，這樣顯示GIF：

$rootScope.loading = true; 

然後，一旦你取得了你的電話，$rootScope.loading = false;

在上面，簡單發生的是您定義了一個指令<loading>，該指令將被模板<div ng-show="loading"><img src=".../path/to/loading.gif"/>Loading...</div>取代。然後，只有當loading是true時才顯示div。

這種技術肯定有效，因爲我已經使用它，希望它有幫助;）