我尝试使用Angular UI-Router实现级联路由。这是我的代码,
$stateProvider
.state('billing', {
url: '/billing',
templateUrl: 'app/billing/billing.html',
controller: 'BillingCtrl',
abstract: true,
resolve: {
currentUser: ['$state', '$stateParams', 'Auth',
function ($state, $stateParams, Auth) {
return Auth.getCurrentUser().$promise.then(function (user) {
return user;
});
}]
}
})
.state('billing.table', {
url: '/table',
templateUrl: 'app/billing/_table.html',
controller: 'BillingCtrl',
data: {
tables: [
{"id": 0, "name": "Table 0"},
{"id": 1, "name": "Table 1"},
{"id": 2, "name": "Table 2"},
{"id": 3, "name": "Table 3"}
]
}
})
.state('billing.table.bill', {
url: '/bill/:tableId/:covers',
templateUrl: 'app/billing/_billing.html',
controller: 'BillingCtrl',
parent:'billing'
})
.state('billing.takeout', {
url: '/takeout',
templateUrl: 'app/billing/_takeout.html',
controller: 'BillingCtrl'
})
.state('billing.delivery', {
url: '/delivery',
templateUrl: 'app/billing/_delivery.html',
controller: 'BillingCtrl'
});
基本上,它从'billing.table
'状态开始,呈现一组表对象。当用户点击'Goto Table'时,我有一个Event函数,它触发$ state.go(route),将其转换为'billing.table.bill
'状态。一切都很好,直到这里。
第一个问题:
我想要实现的目标是无法解决的问题是,如何让孩子处于粘性状态,即。每当我点击地址栏上的输入时,/billing/bill/1/2
始终会重定向到/billing/table
。我希望/billing/bill/1/2
是粘性的,这样每当用户在地址栏上输入此URL时,它应该解析为此状态。我也尝试过使用带DSR的ui-router-extras。它仍然无效。
第二个问题:
我希望我的子状态在父状态ui-view定义中呈现,基本上我希望它替换父视图模板并将其替换为子视图模板。为实现此目的,我在parent:'billing'
子状态中设置了billing.table.bill
。这很好,但它与我的第一个问题有关。
有些见解会非常感激。
提前致谢。
更新
解决了这个问题。它无法与$state.go()
一起使用。使用ui-sref链接所有子状态完美地解决了所有状态。