4

目前，我有一个包含以下内容的 index.html：

<div ng-controller="MainCntl">  
    <div ng-view></div>
</div>

ng-view 根据路由 URL 加载“template1.html”或“template2.html”。“template1”由“Controller1”控制，“template2”由“Controller2”控制。

我想要做的：仅在 MainController 内的所有异步调用完成后才加载 URL 映射的内容（使用 $routeProvider）。

任何建议将不胜感激。

4

2 回答 2

4

AngularJS 路由有一个用于此目的的属性，即resolve属性：

window.angular.module('app',[])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'afterDoingSomething.html',
        controller: 'appCtrl',
        resolve: {
          // function that returns a promise
        }
      })
      .otherwise({
        redirectTo: '/'
      });
  }])

这样，只有在返回的 Promise 被解决后，视图才会加载。

试图解释这一点是没有意义的，当Egghead解释得这么好时：

请记住，任何 $http 或 $resource 调用都会返回这些 Promise，因此您不必直接使用它们（返回$http(...)同样有效 - 或者您可以将多个 $http 调用组合成一个 Promise）

于 2013-07-31T10:11:22.160 回答
1

有另一个路由'template3'，它将在异步调用正在进行时显示，并将成为默认路由。

从异步调用承诺 API的“然后”或“成功”更新路由，使用$location.path()这样，当满足所有条件时，您可以将用户路由到预期的模板并且当您需要显示错误时味精，您可以使用加载时显示的默认模板。

于 2013-07-31T08:00:21.743 回答