我已经使用 Angular 一两年了,但这是我使用 ui-router 的第一个项目。我在 View 和 subview 方面遇到了一些问题。该应用程序是一个标准的左侧菜单栏,右侧的 View 会根据在菜单栏中单击的内容而变化。
在 index.html 上
<body>
<div ui-view></div>
</body>
在 config.js 文件中,它定义了路由
.state("dashboard", {
url: "/dashboard",
templateUrl: "components/dashboard/dashboard.html",
data: {
pageTitle: "Dashboard",
requiresLogin: false
}
})
.state("dashboard.welcome", {
url: "/welcome",
templateUrl: "components/welcome/welcome.html",
data: {
pageTitle: "Welcome",
requiresLogin: false
}
})
在dashboard.html文件中
<div class="dashboard">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-8">
<div ui-view>
/dashboard
路径正确加载,并将加载左侧导航栏,右侧空白。但是将状态更改为 dashboard.welcome
( /welcome
) 不会加载welcome.html 模板。 最佳答案
每当使用 ui-router
时,您都需要了解状态的概念与路由不同。当你定义一个子状态时,它是相对于它的父状态定义的。在您的场景中 dashboard.welcome
被定义为 dashboard
的子状态。子状态的路由是相对于父状态的,并且是 {parent url}/{child url}
。因此,您应该使用以下 2 中的任何一个来路由到该状态:
使用 $state.go 通过指定状态名称来更改状态
$state.go('dashboard.welcome');
使用 $location.path 通过指定 url 来更改路由
$location.path('/dashboard/welcome');
关于angularjs - Angular ui-router subview 问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37074889/