我不相信 Angular UIrouter 正在路由到我的视图
I don't believe Angular UIrouter is routing to my view
当我单击页脚中的按钮以转到该视图时,未通过 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 家。
您当前实现状态的方式将导致一些奇怪的状态名称形成,例如 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"
});
当我单击页脚中的按钮以转到该视图时,未通过 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 家。
您当前实现状态的方式将导致一些奇怪的状态名称形成,例如 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"
});