子视图在 angular-ui-router 中不起作用答案

【问题标题】：Child view not working in angular-ui-router子视图在 angular-ui-router 中不起作用
【发布时间】：2015-07-15 04:02:03
【问题描述】：

代码如下：

$stateProvider.
  state('dashboard', {
    url: '/dashboard/',
    templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
    controller: 'DashboardCtrl'
  }).
  state('dashboard-home', {
    url: '/dashboard/home/',
    parent: 'dashboard',
    templateUrl: 'modules/dashboard/views/home.client.view.html'
  });

我在 dashboard.client.view.html

中有一个 <div ui-view></div> 元素

当我导航到/dashboard/home/ 时，什么也没有出现。目标是将home.client.view.html 注入dashboard.client.view.html。

【问题讨论】：

您在寻找嵌套视图吗？如果是，那么试试这个 state('dashboard.dashboard-home', { });这告诉浏览器“dashboard-home”是“dashboard”的嵌套视图。如果否，请进一步解释您的问题。
嗨，当我查看此文档 (github.com/angular-ui/ui-router) 时，我发现 ui-view 需要一个 ID。也许你必须在你的 div 中这样做：
@kurenaiKunai 是的，我正在寻找嵌套视图。我已经这样做了，但它不起作用。 “父”属性应该做同样的事情，不是吗？

标签： javascript html angularjs angular-ui-router

【解决方案1】：

有an example as working plunker

每个Child 状态都从其Parent 继承url。所以我们应该只使用

url: '/home',

因为父母会添加/dashboard。

状态定义改变了我们子状态中的url：

.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
    controller: 'DashboardCtrl'
  })
.state('dashboard-home', {
    //url: '/dashboard/home/',
    url: '/home',
    parent: 'dashboard',
    templateUrl: 'modules/dashboard/views/home.client.view.html'
});

这些链接按预期工作：

<a href="#/dashboard">
<a href="#/dashboard/home">

在行动中检查它here

有another working example，这表明我们可以不使用parent:''，但使用点符号来映射状态：

state('dashboard', {
    url: '/dashboard',
    templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
    controller: 'DashboardCtrl'
})
//.state('dashboard-home', {
.state('dashboard.home', {
    //url: '/dashboard/home/',
    url: '/home', 
    templateUrl: 'modules/dashboard/views/home.client.view.html'
});

你可以观察here

【讨论】：

您的“Check it in action [here]”链接未正确链接。
@DrCord 非常感谢...正在修复它
谢谢。这个小细节花了我很多时间。