僅更改多個命名的嵌套路由之一

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

我將如何更改單個路線？ 例如，如果我想更改“ left @ metricDashboard”，但不考慮“ canvas”和“ right”路線。 如果沒有創建新狀態並顯式聲明所有路由，我似乎找不到語法。

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 個解決方案

解決方案1
1 已采納 2016-02-02 18:11:00

僅更改多個命名的嵌套路由之一

問題描述

1 個解決方案

解決方案1 1 已采納 2016-02-02 18:11:00

解決方案1
1 已采納 2016-02-02 18:11:00