我不相信 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>

一切都正确路由，直到我将 parent 键输入我的状态并添加并存档为 children 家。

Answer 1

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

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

在您的状态定义中定义父属性
在定义子状态时遵循点（.）符号，例如parentState.childState

让我们看看你是如何修复它的。

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

或

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

配置

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

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

I don't believe Angular UIrouter is routing to my view

javascript

routing

angularjs

angularjs-routing

angular-ui-router

让我们看看你是如何修复它的。