Javascript 仅更改多个命名嵌套管线中的一个_Javascript_Angularjs_Angular Ui Router_Single Page Application

Javascript 仅更改多个命名嵌套管线中的一个

javascript angularjs

Javascript 仅更改多个命名嵌套管线中的一个,javascript,angularjs,angular-ui-router,single-page-application,Javascript,Angularjs,Angular Ui Router,Single Page Application,我有一个具有多个命名嵌套视图的模板：模板1： <body> <div ui-view></div> </body> 我将如何更改单个路线？例如，如果我想改变”left@metricDashboard，但不要使用“画布”和“正确”路线。如果不创建一个新状态并再次显式声明所有路由，我似乎无法找到语法。好的，我猜您希望创建另一个状态，该状态将只更改其中一个视图，而不是所有视图让我们称它为left，并使其成为metricsDashboard

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

模板1：

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

我将如何更改单个路线？例如，如果我想改变”left@metricDashboard，但不要使用“画布”和“正确”路线。如果不创建一个新状态并再次显式声明所有路由，我似乎无法找到语法。

好的，我猜您希望创建另一个状态，该状态将只更改其中一个视图，而不是所有视图

让我们称它为

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

如果它是子状态，则不必声明所有视图，只声明更改的视图我想我已经尝试过了。你能提供一些语法吗？你能更具体地说明你想要实现什么吗？看看我的答案，这就是你想要的吗？我想可能就是这样。我正在做一些测试。好的。我确实让它工作了。起初我认为它不起作用，但我不得不在其中添加

css:{href:“core/metric dashboard/style.css”}，

属性，因为我正在使用css路由。

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