子视图在 angular-ui-router 中不工作

Question

代码如下：

$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.

Answer 1

有an example as working plunker

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

url: '/home',

因为 parent 将添加 /dashboard.

状态定义已更改 url 在我们的 child 状态中：

.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

子视图在 angular-ui-router 中不工作

Child view not working in angular-ui-router

html

javascript

angularjs

angular-ui-router