UI-路由器中的嵌套状态问题

Question

我在 UI-Router 中遇到嵌套状态问题。我有两个状态，单击按钮后它应该转换到另一个状态，并且 url 发生变化，但模板没有。这是我的状态逻辑代码：

$stateProvider.state('accounts', {
url: '/accounts',
views: {
  'menu': {
    templateUrl: 'templates/menu.html',
    controller: 'MenuController'
  },
  'main': {
    templateUrl: 'templates/accounts.html',
    controller: 'AccountsController'
  }
}
});
$stateProvider.state('accounts.detail', {
url: '/:accountID',
views: {
  'main': {
    templateUrl: 'templates/accounts.detail.html',
    controller: 'AccountsDetailController'
  }
}
});

我的按钮逻辑：$state.go('accounts.detail', { accountID : account.accountID});

我的两个观点都包含在 ui-view 标签中。所有其他根状态都正常工作（/home、/orders），但是 /accounts/:accountID 不会触发模板加载和转换。任何见解将不胜感激。

Answer 1

<ion-view /> 不等同于 <ui-view />，在 Ionic Framework 中它只是一个容器来插入 header/footer 栏和内容。

使用<ion-nav-view />http://ionicframework.com/docs/api/directive/ionNavView/ 并在您的父视图中按名称引用此嵌套视图：<ion-nav-view name="main" />

Answer 2

我的问题是我没有正确引用我的观点。由于它们的嵌套方式，我需要使用绝对名称来显示视图。链接的 UI-router 文档描述了我的问题。

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

UI-路由器中的嵌套状态问题

Issues with Nested States in UI-Router

angularjs

ionic-framework

angular-ui-router