Angular UI Router 多个/命名路由答案

【问题标题】：Angular UI Router multiple/named routesAngular UI Router 多个/命名路由
【发布时间】：2015-03-30 08:15:56
【问题描述】：

我有一个用户布局文件，它是任何用户页面的模板：

<div class="user-wrapper">
    <div ui-view="menu"></div>
    <div ui-view="content"></div>
</div>

根据状态，我希望菜单有所不同。如：

    .state('user', {
        url: '/user',
        templateUrl: 'partials/user.html',
        controller: 'userController',
    })

    .state('user.one', {
        url: '/one',
        controller: 'oneController',
        views: {
            "menu": { templateUrl: "partials/client-menu.html" },
            "content": { templateUrl: "partials/one.html" }
        },
    });

    .state('user.two', {
        url: '/two',
        controller: 'twoController',
        views: {
            "menu": { templateUrl: "partials/client-menu.html" },
            "content": { templateUrl: "partials/two.html" }
        },
    });

    .state('user.three', {
        url: '/three',
        controller: 'threeController',
        views: {
            "menu": { templateUrl: "partials/admin-menu.html" },
            "content": { templateUrl: "partials/three.html" }
        },
    });

现在您可以看到“一”和“二”都使用相同的菜单，但“三”使用不同的菜单。这一切都很好，但有没有办法避免在“一”和“二”上重复菜单。

比如创建一个使用“user-menu.html”的“user.client”状态，那么“one”将改为“user.client.one”，并且只需要指定内容。

我认为主要问题是

<div ui-view="content"></div>

是关于“user.client.one”的祖父，那它怎么指定内容呢？

【问题讨论】：

标签： angularjs angular-ui angular-ui-router

【解决方案1】：

我想说，诀窍是将“菜单”视图定义移动到父状态“用户”

.state('user', {
    url: '/user',
    views: {
      "" : {
        templateUrl: 'partials/user.html',
        controller: 'userController',
      },
      "menu@user": { templateUrl: "partials/client-menu.html" },
     },
     ...

那么，发生了什么？ “用户”的任何子状态都已经填充了"menu" 的内容，默认为templateUrl: "partials/client-menu.html"

任何其他孩子，都可以覆盖它...

.state('user.one', {
    url: '/one',
    controller: 'oneController',
    views: {
        // "menu": already set by parent
        "content": { templateUrl: "partials/one.html" }
     ....

.state('user.two', {
    url: '/two',
    views: {
        // "menu": set in parent
        "content": { templateUrl: "partials/two.html" }
        ...

.state('user.three', {
    url: '/three',
    controller: 'threeController',
    views: {
        // here we override that
        "menu": { templateUrl: "partials/admin-menu.html" },
        "content": { templateUrl: "partials/three.html" }
    ...

也许，请查看此问答以了解有关多视图嵌套的更多想法：

【讨论】：

Hm ic 所以只需将客户端菜单设为默认值，如果它的管理状态覆盖它。
是的，正是……这就是我处理状态的方式：实体/列表/详细信息。在选择细节之前......它的区域可以包含一些默认内容......检查答案中的链接......关于布局的其他一些观点......但是，我的回答应该很清楚，我会说。希望能帮助到你。尽情享受 UI-Router
谢谢。如果您在上面看到，我认为使用绝对视图找到了另一种方法。到目前为止它似乎有效。
是的，这是我的解决方案的变体。很高兴这对你有用
祝 UI-Router 好运 ;)

【解决方案2】：

我认为找到了一个解决方案用户@绝对视图：

.state('user', {
    url: '/user',
    templateUrl: 'partials/user.html',
    controller: 'userController',
})

.state('user.client', {
    url: '/client',
    views: {
        "menu": { templateUrl: "partials/client-menu.html" }
    },
})

.state('user.admin', {
    url: '/admin',
    views: {
        "menu": { templateUrl: "partials/admin-menu.html" }
    },
})

.state('user.client.one', {
    url: '/one',
    controller: 'oneController',
    views: {
        "content@user": { templateUrl: "partials/one.html" }
    },
});

.state('user.client.two', {
    url: '/two',
    controller: 'twoController',
    views: {
        "content@user": { templateUrl: "partials/two.html" }
    },
});

.state('user.admin.three', {
    url: '/three',
    controller: 'threeController',
    views: {
        "content@user": { templateUrl: "partials/three.html" }
    },
});

感觉有点干净，但我不确定它是否仍然是正确的方法。

【讨论】：