AngularJS仅在父控制器完成异步调用时加载控制器答案

【问题标题】：AngularJS Load controllers only when parent controller finishes async callAngularJS仅在父控制器完成异步调用时加载控制器
【发布时间】：2013-12-07 11:29:17
【问题描述】：

我正在使用 AngularJS 和 Google Cloudendpoint 构建网站

架构如下。我有：

1 - 管理整个站点显示（顶部菜单、模式等...）的 MainCtrl

<body ng-controller="MainCtrl" ng-cloak main-directive>
    ...
    <div ng-view></div>
    ...
</body>

2 - 每个页面都有一个控制器的 ng-view，每个页面都有自己的控制器，由 $routeprovider 管理

main.js

.config([
    '$routeProvider',
    '$locationProvider', 
    '$httpProvider',
    function($routeProvider, $locationProvider, $httpProvider) {

                    ...
        $routeProvider.when('/example', {
            templateUrl : 'partials/example.html', 
            controller  : 'ExampleCtrl',
            access      : accessLevels.PUBLIC
                    }
                    ...
        $routeProvider.otherwise({redirectTo: '/'});
    }

MainCtrl 需要对 Google Cloud Endpoint 进行异步调用才能使会话看起来像这样。

gapi.client.myapi.app.init().execute(function(resp){});

到目前为止，我所做的是将代码包装在 MainCtrl 调用的 Service 函数中，然后在每个子控制器中监视 initDone 值，该值在异步调用完成时在 MainCtrl 中更新。

主控件

SessionService.init().then(function(data){
    $scope.initDone = SessionService.getInitDone();
});

服务

angular.module('myapp.services').service('SessionService', function ($http, $q, $rootScope) {

this.initDone = false
this.session = {}

this.init = function(){
    var s = this; 
    var deferred = $q.defer();
    gapi.client.myapi.app.init().execute(function(resp){
        deferred.resolve(resp);
        s.initDone = true;
    });
    return deferred.promise;
}

this.getInitDone = function(){
    return this.initDone;
}

});

ExampleCtrl

angular.module('myapp.controllers').controller('ExampleCtrl', function MainCtrl($scope, $timeout, $log, $location, SessionService) {

$scope.$watch('initDone', function(newVal, oldVal){
    $scope.testValue = SessionService.getInitDone()
})

});

虽然这项工作我不确定它是否是正确的解决方案。我希望能够让 ng-view 等到 MainCtrl 完成他的工作。

因为按照我的方式进行操作意味着一旦对端点的调用得到更新，从用户的角度来看这看起来不太好，就会显示 ng-view。

我尝试在 $routeProvider 中使用 resolve 并从那里进行 API 调用，但是我的 MainCtrl 没有正确获取会话值。

我的解决方案是：

   $routeProvider.when('/example', {
templateUrl : 'partials/example.html', 
controller  : 'ExampleCtrl',
access      : accessLevels.PUBLIC,
    resolve     : MainCtrl.init
}

但 MainCtrl 在 $routeProvider 中不可用

另一个想法是拦截 ng-view 调用，但我不确定在哪里执行此操作并同时访问 Service。

感谢您的任何想法/帮助

编辑

我试图在我的 main.js 中做这样的事情

        $routeProvider.when('/example', {
            templateUrl : 'partials/example.html', 
            controller  : 'ExampleCtrl',
            access      : accessLevels.PUBLIC,

            resolve: {
                sessionData: ["$q", "SessionService", function($q, SessionService) {
                    //console.log(SessionService.getTest())

                    var deferred = $q.defer();
                    gapi.client.myapi.app.init().execute(function(resp){
                        deferred.resolve(resp);
                    });
                    return deferred.promise;
                }]

        });

如果我希望每个子控制器调用 api，这会起作用。不过，我想要的是让子控制器使用 MainCtrl 准备就绪后初始化的任何内容。基本上只在 MainCtrl 准备好时才加载视图和关联的控制器（包括异步调用

【问题讨论】：

标签： angularjs google-cloud-endpoints

【解决方案1】：

根据下面的 cmets 编辑

这个想法是用 ng-if 阻止视图，直到 api 调用返回：

// Session service
 this.init = function(){
      if (!this.initDone){
          var s = this;
          var deferred = $q.defer();
          gapi.client.myapi.app.init().execute(function(resp){
              deferred.resolve(resp);
              s.initDone = true;
          });
          return deferred.promise;
      }
 }




// MainController.js :
 $scope.initDone = false;
 SessionService.init().then(function(
     $scope.initDone = SessionService.getInitDone();
  });


// index.html: 
<div ng-if="initDone"> 
    <div id="view" ng-view> </div>
</div>

旧答案： 您能否将对 Google 的异步调用移至一项服务并让该服务返回一个承诺

     myApp.service('DataService', ['$rootScope', '$http', function ($rootScope, $http) {

     var promise = $http.get("http://google.com/theservice").success(function (data) {
             ......
      });
      this.promise = promise

然后在您的路由设置中进行解析，该解析将在调用 Google 服务返回后等待唯一加载控制器

    when('/example', {templateUrl: 'partials/example.html', 
                   controller: 'ExampleCtrl', 
         resolve: {
            'MyServiceData': function (DataService) {
                return DataService.promise;
            }
        }}).

编辑：看看这里如何返回一个 API 调用的承诺 https://stackoverflow.com/a/16117041/514463

【讨论】：

我实际上尝试了与 defer 和 resolve 类似的东西（参见我上面的编辑），但我的问题是我仍然需要 MainCtrl 来获得调用的结果。我不希望子控制器调用该服务，我希望他们能够在 MainCtrl 准备好后使用它调用的内容。所以想法是修改 ng-view 以便仅在 MainCtrl 准备好时加载视图和控制器
我的代码有点不同，因为据我所知，Cloud Endpoint 不支持 Promise
Facebook 示例展示了如何通过不直接支持它们的 API 调用来使用 Promise - 请参阅他在帖子中的 plunker 示例
您能否在主控制器的 google api 成功函数中简单地设置一个 $scope.initialised = true ，并且在您的 example.html 中有一个大块围绕它的全部或大部分：
...
我已经修改了上面的原始答案。祝你好运。