Question

我有一个工厂打电话给 HomeNews ，我想在 $ resource 仍在处理时制作预装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，

我会说使用指令，比如加载，然后：

<loading></loading>

然后定义一个指令：

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

然后，如果您通常会有一个控制器，您将使用您的服务，就在使用您的服务之前，请将加载定义为true，以便显示gif：

$rootScope.loading = true;

然后，一旦您拨打电话，$rootScope.loading = false;

在上文中，简单发生的是您定义一个指令<loading>，该指令由模板<div ng-show="loading"><img src=".../path/to/loading.gif"/>Loading...</div>替换。然后，仅当loading为true时才显示div。

这项技术确实有效，因为我已经使用过它，希望它有所帮助;）

如何在资源完成获取数据时显示div

1 个答案: