无法在ui路由器中导航到子状态

Question

我的状态如下。我可以从app导航到app.child1。但我无法从app.child1导航到app.child1.child2。浏览器控制台中没有错误。请注意我正在开发离子应用，但我不认为这是离子问题。

app.state('app', {
    url: '/app',
    abstract: true,
    templateUrl: '',
    controller: ''
})

.state('app.child1', {
    url: '/app',
    views: {
        'menuContent': {
            templateUrl: '',
            controller: ''
        }
    }
})

.state('app.child1.child2', {
    url: '/app/child1/child2',
    views: {
        'menuContent': {
            templateUrl: '',
            controller: ''
        }
    }
})

导航：

<button ui-sref="app.child1.child2">Change Page</button>

Answer 1

有a working plunker

状态定义存在一些问题，这些问题将在下面的评论中介绍：

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'app.tpl.thml',
    controller: 'appCtrl'
  })

  .state('app.child1', {
    // child1 should have url part /child1
    // while the /app is inherited from parent
    //url: '/app', 
    url:'/child1',
    views: {
      'menuContent': {
        templateUrl: 'child1.tpl.html',
        controller: 'child1Ctrl'
      }
    }
  })

  .state('app.child1.child2', {
    // all parts are inherited from parents
    // so just /child2 is enough
    //url: '/app/child1/child2',
    url: '/child2',
    views: {
      // we target named view in a grand parent
      // not in parent, we need to use the absolute name
      // 'menuContent': {
      'menuContent@app': {
        templateUrl: 'child2.tpl.html',
        controller: 'child2Ctrl'
      }
    }
  })

这些链接现在可以使用

<a href="#/app/child1">
<a href="#/app/child1/child2">
<a ui-sref="app.child1">
<a ui-sref="app.child1.child2">

检查行动here

Answer 2

您的州没有模板（templateUrl: ''）。他们应该有一个带有ui-view指令的模板，可以注入它的子状态。