在呈現模板之前等待XHR在AngularJS中完成

當在AngularJS中切換視圖時（從＃1到＃2），我向服務器發送兩個XHR請求。其中一個更快完成，一旦完成，模板就會被渲染。但是，在模板中，我指的是從第二個請求返回的數據，該數據當時尚未完成。有沒有一種方法可以在呈現模板之前等待所有請求完成？在呈現模板之前等待XHR在AngularJS中完成

目前，我只是在控制器中定義方法，然後在其底部執行XHR請求並將響應分配給$ scope變量。

來源

2014-09-21 doque

如果您正在使用$編譯指示來動態渲染你的HTML模板，你可以添加

ng-show="showCtrl"

而在你的控制器預設

$scope.showCtrl = false;

如果您有標準路線提供商，用DIV包裝你的HTML模板

<div style="display:none" or ng-show="showCtrl">

如果XHR請求完成，只取DIV-元素與屬性，並說

display:block or 
showCtrl = true; $scope.$apply();

問候

來源

2014-09-21 11:05:50 graphefruit

您應該使用的承諾服務

請參考 https://docs.angularjs.org/api/ng/service/ $ q

來源

2014-09-21 11:06:51 skewl84

我想說處理這個問題的最好方法是在路由器上使用resolve。

如果您使用默認的Angular路由器，請參閱此處的文檔：https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider，特別是路由定義的resolve屬性。它允許你指定任何異步調用之前路由改變和下一個視圖加載完成。

如果你使用angular-ui-router，那裏有完全相同的概念。

下面是使用resolve從角文檔的例子：

.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/Book/:bookId', { 

       templateUrl: 'book.html', 

       controller: 'BookController', 

       resolve: { 
       // I will cause a 1 second delay 
       delay: function($q, $timeout) { 
        var delay = $q.defer(); 
        $timeout(delay.resolve, 1000); 
       return delay.promise; 
       } 
     } 
    }); 
});

顯然，他們有一個假的異步調用這裏有一個超時，但只要你XHR調用返回一個承諾（這將是如果您使用$http服務），那麼在這種情況下，您的控制器可以注入delay，並立即使用解析的數據。

來源

2014-09-21 15:40:16

在呈現模板之前等待XHR在AngularJS中完成

回答

相關問題