AngularJS中的嵌套状态

时间:2014-10-27 12:23:03

标签: angularjs angular-ui-router

我尝试使用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链接所有子状态完美地解决了所有状态。

0 个答案:

没有答案