切换标签时,离子后退按钮显示不正确

Question

我有一个主选项卡,它只显示项目列表.和设置选项卡,其中包含用于设置不同配置的嵌套视图.

如果我按此特定顺序导航,后退按钮显示不正确,或者如果要显示,则标题不会离开:37px

这就是我创建导航栏的方式.

<ion-nav-bar class="bar-stable no-animation" align-title="left">
  <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>
</ion-nav-bar>

是否有解决方案,要么清除该选项卡的历史记录,那么在单击它时会打开主设置选项卡而不是先前打开的嵌套视图？或者如果需要显示,则应正确计算标题的左侧.

这是一个codepen演示.单击此顺序中的选项卡.

1. On main page, click on Scientific Facts
2. After view changes, click on Contacts tab
3. Then click on Home tab again. It reproduces the behavior.

更新:

到目前为止,我发现有一个$scope.$watch决定是否显示或隐藏后退按钮.这会被触发很晚(在计算和标题对齐之后).因此,在计算时,leftWidth不会返回按钮的宽度.

Answer 1

当像这样使用选项卡时，每个选项卡都包含自己的历史记录。它实际上正确显示了后退按钮，因为主页选项卡状态已更改为子页面。然后，后退按钮将带您返回此选项卡的主页（后退按钮特定于每个选项卡！）。第一次单击/点击选项卡按钮会切换选项卡，第二次单击/点击实际上会将用户带到该选项卡的默认页面。该错误是有时仍应用后退按钮宽度。

我相信 Ionic 团队也在为此进行一些改进和修复。

您可以$ionicNavBarDelegate.showBackButton(false);在主页的控制器中使用以在该视图期间禁用后退按钮。您还nav-clear可以将指令放在锚标记上，以显式隐藏链接视图中的后退按钮。

控制器示例

angular.module('App').controller('HomeCtrl', function ($scope, $ionicNavBarDelegate) {
  // Disable back button on this controller
  $ionicNavBarDelegate.showBackButton(false);
});