无法导航到 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

您的州没有模板 (templateUrl: '')。他们应该有一个带有 ui-view 指令的模板，可以在其中注入子状态。

Answer 2

有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

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

Unable to navigate to child state in ui router

angularjs

angular-ui

angular-ui-router

ionic-framework