我已经使用 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/

10-13 09:36