Question

我正在尝试让ng-view等待xhr请求。我有一个路由ng-view的两个控制器，第一个完全加载。但是另一个不能很好地呈现，因为xhr响应在下载partial.html之后发生。在客户端获得partial.html响应之前，如何避免xhr请求？

您可以在下面看到路由配置的代码：

var configuration = [
  '$routeProvider',
  '$locationProvider',
  function(routeProvider, locationProvider) {
    routeProvider.when('/', {
      templateUrl: '/partials/hotelinfo.html',
      controller: 'HotelInfo'
    }).when('/service/dept/:id', {
      templateUrl: '/partials/department.html',
      controller: 'Department'
    }).otherwise({
      redirectTo: '/'
    });

    locationProvider.html5Mode(true);
  }
];

您可以在下面看到获得xhr响应

的控制器配置

<!-- language: lang-js -->

var Department = [
  '$scope',
  '$routeParams',
  function (scope, routeParams) {
    http.get('/service/dept/' + routParams.id).success(function (data) {
      scope.data = data;
    });
  }
];

Answer 1

不是从控制器调用$http.get，而是从$routeProvider上的解析函数调用它并将其注入控制器。这将导致Angular在$http的承诺得到解决之前不加载您的视图。

Answer 2

您可以使用routeProvider中的resolve来完成此操作。它返回一个承诺。在解除该承诺之前，视图不会加载。您可以在控制器中解决该承诺。

有关详细信息，请参阅http://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider。

var configuration = [
  '$routeProvider',
  '$locationProvider',
  function(routeProvider, locationProvider) {
    routeProvider.when('/', {
      templateUrl: '/partials/hotelinfo.html',
      controller: 'HotelInfo'
    }).when('/service/dept/:id', {
      template: '/partials/department.html',
      controller: 'Department',
      resolve: {
            deferred: function($q) {
                return $q.defer();
            }
        }
    }).otherwise({
      redirectTo: '/'
    });

    locationProvider.html5Mode(true);
  }
];


var Department = [
  '$scope',
  '$routeParams',
  'deferred',
  function (scope, routeParams, deferred) {
    http.get('/service/dept/' + routParams.id).success(function (data) {
      scope.data = data;
      deferred.resolve();
    });
  }
];

如何让ng-view等待XHR响应？

2 个答案: