我不相信 Angular UIrouter 正在路由到我的视图

Question

当我单击页脚中的按钮以路由到该视图时，未通过 ui-view 更改为正确的模板。控制台没有吐出任何错误，所以我很困惑。

这是我的状态

$stateProvider
                .state("home", {
                    url: "/home",
                    templateUrl: "src/templates/home.html",
                    controller: "ListController as ul"
                })
                .state("home.about", {
                    parent: "home",
                    url: "/about",
                    templateUrl: "src/templates/home/about.html"
                })
                .state("home.archived", {
                    parent: "home",
                    url: "/archived",
                    templateUrl: "src/templates/home/archived.html"
                });

这是我的页脚，它托管了一个菜单，其中包含指向 ui-sref 状态的链接。

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<ul class="footerul">
<li class="footerlist"><md-menu>
    <md-button class="menu" aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
        <i class="fa fa-cog fa-lg"></i><span> Menu</span>
    </md-button>
    <md-menu-content width="6">
        <md-menu-item>
            <md-button ui-sref="home" ng-click="{ active: nav.isActive('/home')}">
                <i class="fa fa-home"></i>
                Home
            </md-button>
        </md-menu-item>
        <md-menu-item>
            <md-button ui-sref="home.about" ng-click="{ active: nav.isActive('/about')}">
                <i class="fa fa-info-circle"></i>
                About
            </md-button>
        </md-menu-item>
        <md-menu-item>
            <md-button ui-sref="home.archived" ng-click="{ active: nav.isActive('/archived')}">
                <i class="fa fa-info-circle"></i>
                Archived
            </md-button>
        </md-menu-item>
    </md-menu-content>
</md-menu></li>

一切都正确路由，直到我将父键放入我的状态并添加 about 并存档为 home 的子级。

Answer 1

您当前实现状态的方式将导致一些奇怪的状态名称形成，例如 about 子状态将可通过名称 home.home.about 访问，archived 状态将可通过 home.home.archived 访问，这是发生的由于在您的状态定义中注入了parent: 'home' 选项。它将父州名附加在子州名之前。

基本上你不应该混淆定义子状态的两种方法，下面是定义子状态的方法。

1. 在状态定义中定义父属性
2. 在定义子状态时遵循点（.）表示法，如parentState.childState

让我们看看如何解决它。

您应该从所有子状态中删除 parent 属性，因为您已经遵循了第二种方式（遵循点符号来定义子状态）

或

如果您想在 state 上坚持使用 parent 选项，那么 state 配置将如下所示。

配置

$stateProvider
.state("home", {
  url: "/home",
  templateUrl: "src/templates/home.html",
  controller: "ListController as ul"
})
.state("about", {
  parent: "home",
  url: "/about",
  templateUrl: "src/templates/home/about.html"
})
.state("archived", {
  parent: "home",
  url: "/archived",
  templateUrl: "src/templates/home/archived.html"
});