Question

我正在使用angularJS和ui-router开发一个项目来管理页面状态。为了简化整体架构，页面（UI路由器状态）在“模块”（主题安排）之间划分如下。

root
  -> module1
    -> state1
    -> state2
  -> module2
    -> state1
    -> state2

root，module1和module2是抽象的（但它们具有链接到它们的url部分）。
root.module1.state1和root.module2.state2在URL开头需要上下文的可选参数。

这里的想法是为上下文生成以下URL：

root.module1.state1 : /#/:contextId/module1/state1
root.module1.state2 : /#/module1/state2
root.module2.state1 : /#/module2/state1
root.module2.state2 : /#/:contextId/module2/state2

注册表提供程序设置：

var root = {
    name: 'root',
    abstract: true,
    url: '/:contextId',
    params :{
        contextId: {value:null, squash: true}
    }
};

var module1 = {
    name: 'module1',
    parent: 'root',
    abstract: true,
    url: '/module1'
};

var module2 = {
    name: 'module2',
    parent: 'root',
    abstract: true,
    url: '/module2'
};

var mod1_state1 = {
    name: 'module1.state1',
    url: '/state1'
};

var mod1_state2 = {
    name: 'module1.state2',
    url: '/state2'
};

var mod2_state1 = {
    name: 'module2.state1',
    url: '/state1'
};

var mod2_state2 = {
    name: 'module2.state2',
    url: '/state2'
};

$stateRegistryProvider.register(root);
$stateRegistryProvider.register(module1);
$stateRegistryProvider.register(module2);
$stateRegistryProvider.register(mod1_state1);
$stateRegistryProvider.register(mod1_state2);
$stateRegistryProvider.register(mod2_state1);
$stateRegistryProvider.register(mod2_state2);

链接基于动态值，例如：

<a ui-sref="module1.state1({contextId: $ctrl.contextId})">State 1</a>

在第一次加载时效果很好（为所有状态生成的href都很好），但是一旦我使用URL中的contextId访问状态（解析值），所有链接都将转换为/#/:contextId/moduleX/stateX

有办法避免这种情况吗？并保留原始生成的链接到第一次加载时的链接？

或者我缺少什么/还有另一种方法可以实现？

注意：该示例仅用于说明我要实现的目标，但是实际项目远不止于此。以下几点是不可能的：

在模块之间移动状态
在所有需要contextId的模块或状态上复制代码

用户界面路由器：遇到可选参数时，避免href重建

0 个答案: