在渲染模板之前等待XHR在AngularJS中完成

Question

在AngularJS中切换视图时（从＃1到＃2），我向服务器发送两个XHR请求。其中一个更快完成，一旦完成，模板就会被渲染。但是，在模板中，我指的是从第二个请求返回的数据，当时尚未完成。 有没有办法在渲染模板之前等待所有请求完成？

目前我只是在控制器中定义方法，然后在底部，执行XHR请求并将响应分配给$ scope变量。

Answer 1

如果您使用$ compile指令动态呈​​现HTML模板，则可以添加

ng-show="showCtrl" 

并在您的控制器预设中

$scope.showCtrl = false;

如果您有标准路由提供程序，请使用DIV包装HTML模板，例如

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

如果你的XHR请求已经完成，只需带有属性的DIV-Element并说出

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

问候

Answer 2

您应该使用承诺服务

请参阅 https://docs.angularjs.org/api/ng/service/ $ Q

Answer 3

我认为处理此问题的最佳方法是在路由器上使用 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调用返回一个promise（如果你使用$http服务就是这种情况），那么你的控制器就可以被注入在这种情况下使用delay，并立即使用已解析的数据。