javascript - 切换选项卡时 ionic 后退按钮显示不正确

Question

我有一个主选项卡，它只显示项目列表。和设置选项卡，它具有用于设置不同配置的嵌套 View 。

如果我按此特定顺序导航，后退按钮显示不正确，或者如果要显示，标题不会离开: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>

是否有解决方案，或者清除该选项卡的历史记录，以便在单击它时打开主设置选项卡而不是之前打开的嵌套 View ？或者如果需要显示，应该适当计算标题的左边。

这是一个 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 团队也正在为此进行一些改进和修复。

您可以在主页面的 Controller 中使用 $ionicNavBarDelegate.showBackButton(false); 以在该 View 期间禁用后退按钮。还有 nav-clear 指令，您可以将其放在 anchor 标记上以明确隐藏链接 View 中的后退按钮。

Controller 示例

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