如何解決路由變更時子控制器的承諾？

我有一個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; 
});

我怎樣才能做到這一點？

來源

2015-04-01 Saidh

簡單添加嵌套國家，每個國家應該有它自己的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(); 
      } 
     } 
    });

這樣，它是非常戰略家進

來源

2015-04-01 15:56:52 Matho

該解決方案解決了這個問題，但URL嚴格使用標題/所有具有標頭的路由:(。 – Saidh 2015-04-02 04:45:09

否否，唯一需要做的事情是設置：** url：「/」**。一個有效的網址，但是我認爲如果在這個家庭狀態下將Header改成一個指向_home state_的指令，會處理基本的用戶信息/登錄，並且添加一個_Loading overlay_直到promise被解決，然後使用* * $ state.go（儀表板）**。請記住選擇哪一個是正確答案 – Matho 2015-04-02 16:57:01

現在看起來不錯。謝謝。 – Saidh 2015-04-06 04:35:49

你只能在DashboardController裏面得到解決承諾，你永遠不會得到它在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有以下

來源

2015-04-01 15:36:04

目前我用這樣的。但我喜歡在其控制器上定義模板的範圍變量;）。 – Saidh 2015-04-02 04:42:07

如何解決路由變更時子控制器的承諾？

回答

相關問題