2014-11-05 117 views
0

在我的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; 

});

回答

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-斗篷類隱藏的內容在每個視圖的頂部在裝載時,將工作像一個魅力!

+0

謝謝!現在我在

上使用ng-cloak,但它只隱藏表單直到HTML被加載,但它仍然遺漏了表單數據。那麼,就這一部分而言,不應該使用ng-cloak? – peta 2014-11-09 14:28:39

+0

那麼這就是你需要在解析函數中加載你的數據的原因 – 2014-11-09 17:05:02

+0

對不起,但我是AngularJS的新手。我不明白如何在我的代碼中實現它。我的數據reuqests在控制器中解決,那麼您的解決方案爲我工作呢? – peta 2014-11-10 11:05:20