私はui-routerに頭を悩ませようとしていましたが、次のロジックを実装しようとしました:
- 状態がない場合は、状態 /items に移動します
- を処理するとき
/items、サーバーから「アイテム」のリストを取得します - 「items」が受信されると state
/items/:itemに移動します。ここで、「item」はアイテムのリストの最初で、サーバーによって返されます - 状態
/items/:itemで、対応する「アイテム」が「強調表示」されたアイテムのリストをレンダリングします（強調表示部分は私のコードには含まれていません）
ただし、子ステートの「コントローラー」機能は実行されません。それは本当に明白なことだと思います。
これがjsです（付随するテンプレートとともにplunkrにもあります）。
angular.module('uiproblem', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/items');
$stateProvider
.state('items', {
url: '/items',
resolve: {
items: function($q, $timeout){
var deferred = $q.defer();
$timeout(function() {
deferred.resolve([5, 3, 6]);
}, 1000);
return deferred.promise;
}
},
controller: function($state, items) {
// We get to this point successfully
console.log(items);
if (items.length) {
// Attempt to transfer to child state
return $state.go('items.current', {id: items[0]});
}
}
})
.state('items.current', {
url: '/:id',
templateUrl: 'item.html',
controller: function($scope, items) {
// This is never reached, but the I can see the partial being
// loaded.
console.log(items);
// I expect "items" to reflect to value, to which the "items"
// promise resolved during processing of parent state.
$scope.items = items;
}
});
}]);