如何解决子控制器对路由更改的承诺？

Question

我有一个 Angular Ionic 应用程序。我在其路由中分配了控制器、模板及其解析承诺。这工作正常，因此我的主控制器仅在父控制器的所有承诺都已解决后才加载。但是如果这个路由包含另一个带有一些承诺的子控制器。这里的问题是页面只需要在父子控制器的所有承诺都解决后加载。

Punker

var app = angular.module('testApp', ['ionic']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('dashboard', {
      url: "/dashboard",
      templateUrl: "dashboard.html",
      controller: 'DashboardController',
      title: 'Dashboard',
      resolve: {
          UserDetails: function(DataService) {
              return DataService.getUserDetails(1);
          },
          DashboardDetails: function(DataService) {
              return DataService.getDashboardDetails();
          }
      }
  });

  $urlRouterProvider.otherwise('/dashboard');
});

app.factory('DataService', function($q) {
   return {
     getUserDetails: function(id){
       var defer = $q.defer();
       var userDetails = {
         name: "Saidh"
       }
       defer.resolve(userDetails);
       return defer.promise;
     },
     getDashboardDetails: function(){
       var defer = $q.defer();
       var dashboardDetails = {
         title: "Dashboard"
       }
       defer.resolve(dashboardDetails);
       return defer.promise;
     }
   }
});

app.controller('HeaderController', function($scope, UserDetails) {
   console.log(UserDetails);//Error: [$injector:unpr] Unknown provider:
   $scope.userDetails = UserDetails;
});
app.controller('DashboardController', function($scope, DashboardDetails) {
   console.log(DashboardDetails);//Working: show result
   $scope.dashboardDetails = DashboardDetails;
});

我怎样才能做到这一点？

Answer 1

您只能在 DashboardController 内获得 resolve 承诺，您永远不会在 html 模板内的家庭控制器内获得它。解析服务在路由 state 本身中提到的控制器内部可用。因此，您可以访问 DashboardController 内的依赖项，将其放在范围变量中并使其对子范围和视图也可用。

您还需要从 HomeController 中删除 UserDetails 依赖项以消除错误，因为 UserDetails 永远无法访问

代码

app.controller('DashboardController', function($scope, DashboardDetails, UserDetails) {
  console.log(UserDetails); //Working: show result
  $scope.dashboardDetails = DashboardDetails;
  $scope.userDetails = UserDetails;
});

参见Working Plunkr此处

Answer 2

简单添加嵌套状态，每个状态都应该有自己的 resolve: somePromise 属性，here i fork your plunkr 并添加超时，以便父视图和子视图仅在 promise 为 solved

时显示

示例：

    $stateProvider.state('header', {
      url: "/home",
      templateUrl: "header.html",
      controller: 'HeaderController',
      resolve: {
          UserDetails: function(DataService) {
              return DataService.getUserDetails(1);
          }
      }
  });

  $stateProvider.state('header.dashboard', {
      url: "/dashboard",
      controller: 'DashboardController',
      templateUrl: "dashboard.html",
      parent: 'header',
      resolve: {
          DashboardDetails: function(DataService) {
              return DataService.getDashboardDetails();
          }
      }
  });

这样就非常具有战略意义了

如何解决子控制器对路由更改的承诺？

How to resolve promises of child controller on route change?

angularjs

angular-ui-router

ionic-framework

angular-promise

ionic