子模板的AngularJS子未显示答案

【问题标题】：AngularJS child of child template not showing子模板的AngularJS子未显示
【发布时间】：2014-12-10 17:30:51
【问题描述】：

没有错误。

我可以访问 /teams 中的团队列表和 /teams/2 中的特定团队，其中 2 是团队的 ID。

  $stateProvider.state('app.teams.team', {
    url: '/:team',
    templateUrl: 'templates/teams/team.html',
    controller: 'TeamCtrl',
    resolve: {
      team: function($stateParams, TeamsService) {
        return TeamsService.getTeam($stateParams.team)
      }
    }
  })

我无法访问 /teams/2/roster 中的名册。

 $stateProvider.state('app.teams.team.roster', {
    url: '/roster',

    templateUrl: 'templates/teams/roster.html'

  })

页面加载没有错误，并显示templates/teams/team.html而不是templates/teams/roster.html

【问题讨论】：

team.html 中有 ui-view 指令吗？
不，我不知道。我想用 roster.html 覆盖 team.html，我是不是走错了路？

标签： angularjs ionic-framework angularjs-routing

【解决方案1】：

问题在于您对待状态继承的方式。

使用当前配置：

app.teams.team 状态期望 url http://app.teams url/:team

和

app.teams.team.roster 状态期望 url http://app.teams.team url/roster

每个孩子都希望父状态持有一个 ui-view 指令，这样 templateUrl 就可以被注入。

这意味着对于名册状态，您有 app.teams html，包含团队 html，包含名册 html。

要加载同一级别下的不同 html，请保持在同一招聘级别 ->

app.teams.team

app.teams.roster

【讨论】：

很清楚，但问题是每个团队都有不同的花名册，我需要能够在 teams/:team/roster 访问它。我现在正在尝试使用不同的状态，app.roster 与 url: /teams/:team/roster 看起来很有希望。

【解决方案2】：

我最终将名册设置为自己的状态，这符合预期。

  $stateProvider.state('app.roster', {
    abstract: true,
    url: '/teams/:team/',
    views: {
      content: {
        template: '<ion-nav-view></ion-nav-view>'
      }
    },
    resolve: {
      team: function($stateParams, TeamsService) {
        return TeamsService.getTeam($stateParams.team)
      }
    }

  })

  $stateProvider.state('app.roster.index', {
    url: 'roster',
    templateUrl: 'templates/roster/index.html',
    controller: 'TeamCtrl',
  })

【讨论】：