在加载数据时隐藏表单

Question

在我的AngularJS应用程序中，我想隐藏一些页面元素（有时是全部），直到加载所有异步数据。

当我在同一个控制器中有多个数据请求时，如何解决这个问题的任何建议？

我也希望将它与http://victorbjelkholm.github.io/ngProgress结合起来，并找到一个解决方案，该解决方案使用监听dataLoaded状态（或任何最佳解决方案）的状态，以便在应用程序的所有不同控制器中使用。

controller.js

$scope.dataLoaded = false; 

dataFactory.getProduct(accessToken, storeId).then(function (response) { 
    $scope.formData = response.data; 
    $scope.dataLoaded = true; 
}, function (error) { 
    console.log('Error: dataFactory.getProduct'); 
}); 

dataFactory.getBrand().then(function (response) { 
    $scope.brandData = response.data; 
    $scope.dataLoaded = true; 
}, function (error) { 
    console.log('Error: dataFactory.getBrand'); 
}); 

service.js

app.factory("dataFactory", function ($http) { 
var factory = {}; 

factory.getProducts = function (accessToken, storeId) { 
    return $http.get('data/getProducts.aspx?accessToken=' + accessToken + '&storeId=' + storeId) 
}; 

factory.getProduct = function (accessToken, storeId, productId) { 
    return $http.get('data/getProduct.aspx?accessToken=' + accessToken + '&storeId=' + storeId + '&productId=' + productId) 
}; 

factory.getBrand = function (accessToken, storeId) { 
    return $http.get('data/getBrand.aspx?accessToken=' + accessToken + '&storeId=' + storeId) 
}; 

return factory; 

}）;

Answer 1

你可以做的就是使用你的路径提供程序来解决这个功能，它与ng-cloak类的组合一样，就像一个魅力一样，你也可以在切换路线时隐藏和显示“加载镜像”。

比方说，你在你的应用程序此服务：

app.factory("greetingService", function($q, $timeout){ 
    return { 
     getGreeting: function(){ 
      var deferred = $q.defer(); 
      $timeout(function(){ 
       deferred.resolve("Allo!"); 
      },2000); 
      return deferred.promise; 
     } 
    } 
}); 

在控制器设置了 “决心” 功能

.when("/anyroute", { 
    templateUrl: "anyview.html", 
    controller: "anyController", 
    resolve: { 
     greeting: function(greetingService){ 
      return greetingService.getGreeting(); 
     } 
    } 
}) 

：

app.controller("anyController", function ($scope, greeting) { 
    $scope.greeting = greeting; 
}); 

你可以注入你的在你的控制器之前“解决”了依赖关系，这样你就可以在控制器上获得初始数据广告。

显示和隐藏装载机，你可以做一个类似的指令

angular.module('app').directive('loaderBar', function ($rootScope) { 
    return { 
     restrict: 'EA', 
     replace: true, 
     template: '<div class="showloader"><img src="loader.gif" alt="loading..." /></div>', 
     link: function (scope, element) { 
      var namedListener = $rootScope.$$listeners['$stateChangeStart']; 
      if (namedListener === null || namedListener === undefined) { 
       $rootScope.$on('$stateChangeStart', function() { 
        element.addClass('animatedLoader'); 
       }); 
       $rootScope.$on('$stateChangeSuccess', function() { 
        element.removeClass('animatedLoader'); 
       }); 
      } 
     } 
    }; 
}); 

，不要忘了用NG-斗篷类隐藏的内容在每个视图的顶部在装载时，将工作像一个魅力！