Question

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

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

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

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类，并且还可以隐藏和显示＆＃34;加载程序图像＆＃34;当你正在切换路线时。

让我们假设您在自己的应用中拥有此服务：

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

设置＆＃34;解决＆＃34;功能

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

在您的控制器中：

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

你可以注射你已经解决的＆＃34;依赖于您的控制器之前，这样，当控制器加载时，您将获得初始数据。

用于显示和隐藏加载程序，您可以执行类似

的指令

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-cloak类在每个视图顶部加载时隐藏内容，这样就像魅力一样！

加载数据时隐藏表单

1 个答案: