Question

我面临一个奇怪的离子问题。

我尝试创建包含两个子视图（setup.html和roomContent）的网页（settingsContent）。

我的ui-router看起来如下：

$stateProvider 
.state('setup', {
  url: '/setup',
  abstract: true,
  templateUrl: 'setup/setup.html',
  controller: 'setupCtrl',
})
.state('setup.room', {
  url: '/:roomID',
  views: {
    'roomContent': {
      templateUrl: 'setup/room/roomSetup.html',
      controller: 'roomSetupCtrl'
    }
  }
})
.state('setup.menu', {
  url: '/settings',
  views: {
    'settingsContent': {
      templateUrl: 'setup/menu/menuSetup.html'
    }
  }
});

和setup.html模板如下：

// This should display content for roomContent (state: setup.room)
<ion-nav-view name="roomContent">
   // ionic tabs here - don't want them on settings subview!
</ion-nav-view>

// This should display content for settingsContent (state: setup.menu)
<ion-nav-view name="settingsContent"></ion-nav-view>

但是没有像预期的那样工作。

基本上，如果我转到roomSetup，则不会显示内容。如果我更改html中ion-nav-view的顺序（settings之前setup），则不会显示settings内容。它接缝就像它只显示最新的ion-nav-view。

有什么建议吗？

由于

修改

最后我解决了这个问题。

我改变了一点文件夹结构并创建了一个设置状态和一个新的设置状态，因为我意识到我只有一个设置状态但有多个设置。这是新结构，如果它有帮助：

.state('setupRoom', {
  url: '/setup/:roomID',
  templateUrl: './sections/roomSetup/roomSetup.tpl.html',
  controller: 'roomSetupCtrl',
  data: {
    requireLogin: false
  }
}).state('settings', {
  url: '/settings',
  abstract: true,
  templateUrl: './sections/settings/settings.tpl.html',
  data: {
    requireLogin: false
  }
}).state('settings.menu', {
  views: {
    settingsContent: {
      templateUrl: './sections/settings/menu/menuSettings.tpl.html'
    }
  }
}).state('settings.system', {
  url: '/system',
  views: {
    settingsContent: {
      templateUrl: './sections/settings/system/systemSettings.tpl.html',
      controller: 'settingsSystemCtrl'
    }
  }
});

Answer 1

这不应该被定义为多个状态，而是具有多个视图的单个状态。您的方式，您需要两个单独的URL同时显示。与在UIRouter中一样，URL附加到状态，这是不可能的。

$stateProvider
.state('report',{
views: {
  'filters': {
    templateUrl: 'report-filters.html',
    controller: function($scope){ ... controller stuff just for filters view ... }
  },
  'tabledata': {
    templateUrl: 'report-table.html',
    controller: function($scope){ ... controller stuff just for tabledata view ... }
  },
  'graph': {
    templateUrl: 'report-graph.html',
    controller: function($scope){ ... controller stuff just for graph view ... }
  }
}
})

请参阅UI-Router docs about multiple views

Answer 2

您需要嵌套视图：

在设置状态配置

views: {
  'setup@': {
    templateUrl: 'setup/setup.html',
    controller: 'setupCtrl'
  }
}

现在您使用roomContent@setup和settingsContent2@setup

编辑：

如果仍然无效，您仍可以尝试将<ion-nav-view>替换为<div ui-view>。

有关详细信息，请参阅https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

离子 - 子视图没有显示适当的内容

2 个答案: