Question

所以我设置了两条路线：

$stateProvider.state('accounts', {
    abstract: 'true',
    url: "/accounts",
    template: '<div ui-view></div>'
}).state('accounts.view', {
    url: "/:accountNumber",
    views: {
        '@': {
            templateUrl: 'tpl/account/index.html',
            controller: 'AccountController',
            controllerAs: 'controller'
        }
    },
    resolve: {
        today: ['today', function (today) {

            // Return todays date
            return today();
        }],
        tomorrow: ['tomorrow', function (tomorrow) {

            // Return tomorrows date
            return tomorrow();
        }],
        lastMonth: ['lastMonth', function (lastMonth) {

            // Return lastMonths date
            return lastMonth();
        }],
        account: ['$stateParams', 'AccountService', function ($stateParams, accountService) {
            console.log('hi');
            return accountService.get($stateParams.accountNumber);
        }]
    },
    data: {
        requireLogin: true,
        pageTitle: 'Account details'
    }
}).state('accounts.create', {
    url: '/create',
    views: {
        '@': {
            templateUrl: 'tpl/account/save.html',
            controller: 'AccountSaveController',
            controllerAs: 'controller'
        }
    },
    resolve: {
        account: function () {
            return {};
        }
    },
    data: {
        requireLogin: true,
        pageTitle: 'Create account'
    }
}).state('accounts.view.edit', {
    url: '/edit',
    views: {
        '@': {
            templateUrl: 'tpl/account/save.html',
            controller: 'AccountSaveController',
            controllerAs: 'controller'
        }
    },
    data: {
        requireLogin: true,
        pageTitle: 'Edit account'
    }
})

如果我点击装饰有ui-sref='accounts.create'的按钮，它将导航到正确的视图，但会尝试在 accounts.view 中执行解析。似乎：accountNumber 与 / create 混淆。如果我刷新我的页面，它不会加载视图，仍然会尝试解析该帐户。

我尝试了很多方法来解决这个问题。我想有这样的网址：

accounts /：accountNumber - 用于查看帐户

accounts / create - 用于创建帐户和

accounts /：accountNumber / edit - 用于修改帐户

是否可以像这样设置路线？

Answer 1

如果您的accountNumber确实是一个数字，则可以将account.view状态定义为url: "/{accountNumber:int}"。这将阻止accounts/create匹配它。否则，您可以使用一些自定义正则表达式，请参阅docs以实现相同的目的。

您可能还会发现GitHub issue有用。

ui-router问题与stateParams和路由

1 个答案: