在呈现模板之前等待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中完成

回答

相关问题