Question

我有一个包含多个命名的嵌套视图的模板：

模板1：

<body>
    <div ui-view></div>
</body>

模板2：

<header></header>
<div ui-view="left"></div>
<div ui-view="canvas"></div>
<div ui-view="right"></div>

我有以下配置设置：

    .state("metricDashboard", {
        url: "/metric-dashboard",
        css: { href: "core/metric-dashboard/style.css" },
        views: {
            "": {
                templateUrl: "core/metric-dashboard/view.html",
                controller: 'MetricDashboard',
            },
            "left@metricDashboard": {
                templateUrl: "core/metric-dashboard/partials/left.html",
                controller: "MetricDashboardLeft",
            },
            "canvas@metricDashboard": {
                templateUrl: "core/metric-dashboard/partials/canvas.html",
                controller: "MetricDashboardCanvas"
            },
            "right@metricDashboard": {
                templateUrl: "core/metric-dashboard/partials/right.html",
                controller: "MetricDashboardRight"
            }
        }
    })

我如何改变个别路线？例如，如果我想更改＆＃34;离开@ metricDashboard＆＃34;，但留下＆＃34;画布＆＃34;和＆＃34;对＆＃34;仅路线。我似乎无法在没有创建新状态的情况下找到语法并明确地再次声明所有路由。

Answer 1

好的，我猜你想要创建另一个状态，只改变其中一个视图而不是全部视图。

我们称之为left并将其设为metricsDashboard

的孩子

.state("metricDashboard", {
    url: "/metric-dashboard",
    css: { href: "core/metric-dashboard/style.css" },
    views: {
        "": {
            templateUrl: "core/metric-dashboard/view.html",
            controller: 'MetricDashboard',
        },
        "left@metricDashboard": {
            templateUrl: "core/metric-dashboard/partials/left.html",
            controller: "MetricDashboardLeft",
        },
        "canvas@metricDashboard": {
            templateUrl: "core/metric-dashboard/partials/canvas.html",
            controller: "MetricDashboardCanvas"
        },
        "right@metricDashboard": {
            templateUrl: "core/metric-dashboard/partials/right.html",
            controller: "MetricDashboardRight"
        }
    }
})
.state("metricDashboard.left", {
    url: "left",
    views: {
        "left@metricDashboard" : {
            templateUrl: "some.html",
            controller: "AwesomeCtl",
            controllerAs: "awe"
        }
    }
})

现在，当您进入该状态时，只有左侧视图会发生变化，其他视图将保持原始状态metricDashboard中的定义。

仅更改多个命名的嵌套路由中的一个

1 个答案: