Question

导航至朋友标签，然后点击“G.I. Joe”。后退按钮，转换和历史记录按预期工作。

但是我希望它在输入详细信息页面时隐藏标签，所以我让视图替换主导航，如下所示：

.state('tab.friend-detail', {
  url: '/friend/:friendId',
  views: {
    '@': {
      templateUrl: 'friend-detail.html',
      controller: 'FriendDetailCtrl'
    }
  }
})

但是现在返回按钮，过渡和历史停止工作。

expected to work

Here is just what I want

Answer 1

这是expected to work。

怎么样？

我为tabs-item-hide标记添加了<ion-tabs>类ng-class。
然后使用$rootScope作为每个控制器内的标志，以检测当前视图是否要显示标签。

也许我的解决方案不够好，但我认为它会对你有帮助。

缺点？

您必须在每个希望标签显示或隐藏的控制器中放置$rootScope标记（在我的示例中为：$rootScope.data.hideTabs）。
<ion-content>内的所有内容都不会显示。

但您可以随时修改它以便更好地使用，例如，您可以创建一个工厂来管理它。

P / S： 我的灵感来自post

Answer 2

查看你的tabs.html：

<!-- 
  Create tabs with an icon and label, using the tabs-positive style. 
  Each tab's child <ion-nav-view> directive will have its own 
  navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top">


  <!-- Pets Tab -->
  <ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>


  <!-- Adopt Tab -->
  <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
    <ion-nav-view name="tab-friends"></ion-nav-view>
  </ion-tab>


  <!-- About Tab -->
  <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>


</ion-tabs>

它已在顶部指出每个ion-nav-view都有自己的导航历史记录。因此，如果您在另一个视图中加载详细信息html，您将丢失历史信息。因此没有后退按钮。

然而，看看this proposed solution女巫使用自定义指令来达到你想要的效果。

关注离子导航选项卡，但保留历史，过渡和后退按钮

2 个答案:

怎么样？

缺点？