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

【问题标题】：Unable to navigate to child state in ui router无法在 ui 路由器中导航到子状态
【发布时间】：2016-09-22 21:03:51
【问题描述】：

我的状态如下。我可以从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>

【问题讨论】：

确保在您的app.child1 的模板中存在<div ui-view></div> 指令，否则您的app.child1.child2 将不会被填充。

标签： angularjs ionic-framework angular-ui-router angular-ui

【解决方案1】：

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

【讨论】：

【解决方案2】：

有a working plunker

状态定义存在一些问题，下面的 cmets 中介绍了这些问题：

  .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

【讨论】：