Question

所以我设置了几个州：

$stateProvider.state('accounts', {
    url: "/accounts",
    templateUrl: 'tpl/accounts/index.html',
}).state('accounts.view', {
    url: "/{accountNumber:[A-Z]{3}[0-9]{3,7}}",
    views: {
        '@': {
            templateUrl: 'tpl/accounts/view.html',
            controller: 'AccountController',
            controllerAs: 'controller'
        }
    },
    resolve: {
        account: ['$stateParams', 'AccountService', function ($stateParams, accountService) {
            return accountService.get($stateParams.accountNumber);
        }]
    }
}).state('accounts.create', {
    url: '/create',
    views: {
        '@': {
            templateUrl: 'tpl/accounts/save.html',
            controller: 'AccountSaveController',
            controllerAs: 'controller'
        }
    },
    params: {
        account: null
    },
    resolve: {
        account: ['$stateParams', 'AccountProvider', function ($stateParams, provider) {
            return $stateParams.account || provider.newAccount();
        }]
    }
}).state('accounts.view.edit', {
    url: '/edit',
    views: {
        '@': {
            templateUrl: 'tpl/accounts/save.html',
            controller: 'AccountSaveController',
            controllerAs: 'controller'
        }
    }
})

一切正常。现在我需要为创建和编辑创建一些子状态。他们将使用相同的视图和控制器，但我想知道我是否可以使用相同的状态。例如，我将设置一个地址状态，如下所示：

.state('accounts.view.edit.address', {
    url: '/address',
    views: {
        '@': {
            templateUrl: 'tpl/accounts/save/address.html',
            controller: 'AccountAddressSaveController',
            controllerAs: 'controller'
        }
    }
})

我将为创建状态设置另一个，如下所示：

.state('accounts.create.address', {
    url: '/address',
    views: {
        '@': {
            templateUrl: 'tpl/accounts/save/address.html',
            controller: 'AccountAddressSaveController',
            controllerAs: 'controller'
        }
    }
})

对于一个孩子的州来说，这不是一个问题，但还有另外4个，我只是想我会问是否有办法分享各州，比如：

.state(['accounts.create.address','accounts.view.edit.address'], {
    url: '/address',
    views: {
        '@': {
            templateUrl: 'tpl/accounts/save/address.html',
            controller: 'AccountAddressSaveController',
            controllerAs: 'controller'
        }
    }
})

Answer 1

您可以将状态配置放在变量

中

var sharedState = {
    url: '/address',
    views: {
        '@': {
            templateUrl: 'tpl/accounts/save/address.html',
            controller: 'AccountAddressSaveController',
            controllerAs: 'controller'
        }
    }
}

然后简单地做，

.state('accounts.create.address', sharedState)
.state('accounts.view.edit.address', sharedState)

angular-ui-router共享状态

1 个答案: