Question

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

<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" }
        },
    });

现在你可以看到＆＃34;一个＆＃34;和＆＃34;两个＆＃34;两者都使用相同的菜单但是＆＃34;三个＆＃34;使用不同的菜单。这一切都运行正常，但有一种方法可以避免重复菜单上的＃34;一个＆＃34;和＆＃34;两个＆＃34;。

例如制作＆＃34; user.client＆＃34;使用＆＃34; user-menu.html＆＃34;的州然后＆＃34;一个＆＃34;将是＆＃34; user.client.one＆＃34;相反，只需要指定内容。

我认为主要问题是

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

是＆＃34; user.client.one＆＃34;的祖父。那么它如何指定内容？

Answer 1

我想说，诀窍是移动＆＃34;菜单＆＃34;将定义视为父状态＆＃34;用户＆＃34;

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

那么，发生了什么？＆＃34;用户＆＃34;的任何子状态已经填充"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" }
    ...

也许，请查看此Q＆amp;有关多视图嵌套的更多想法：

Answer 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" }
    },
});

感觉更加清洁，但我不确定它是否仍然是正确的方法。

Angular UI路由器多个/命名路由

2 个答案: