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

【问题标题】：Waiting for XHR to finish in AngularJS before rendering template在渲染模板之前等待 XHR 在 AngularJS 中完成
【发布时间】：2014-11-15 11:42:43
【问题描述】：

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

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

【问题讨论】：

标签： angularjs xmlhttprequest angularjs-scope wait

【解决方案1】：

我想说处理这个问题的最佳方法是在您的路由器上使用 resolve。

如果您使用默认的 Angular 路由器，请参阅此处的文档：https://docs.angularjs.org/api/ngRoute/provider/$routeProvider，特别是路由定义的 resolve 属性。它允许您指定将在路由更改和加载下一个视图之前完成的任何异步调用。

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

这是使用 Angular 文档中的 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 服务就会出现这种情况），那么你的控制器就可以注入 @在这种情况下为 987654327@，并立即使用解析的数据。

【讨论】：

【解决方案2】：

你应该使用 promise 服务

请参考 https://docs.angularjs.org/api/ng/service/$q

【讨论】：

【解决方案3】：

如果您使用 $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();

问候

【讨论】：