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

【问题标题】：ionic Back button incorrectly shown while switching tabs切换标签时离子后退按钮显示不正确
【发布时间】：2015-01-09 21:53:57
【问题描述】：

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

如果我按此特定顺序导航，后退按钮显示不正确，或者如果要显示，标题不会离开：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 没有返回按钮的宽度。

【问题讨论】：

我之前遇到过这个问题。我通过保存主页选项卡的“historyID”并直接进入它来解决它。我不认为这是一个很好的解决方案，所以我很好奇其他人想出了什么。同时，你可以看到我在这里做了什么...codepen.io/MrOnosa/pen/ILCed
嗯..这是非常好的解决方法。让我们看看是否有人有任何解决方案。我尝试在 ionic.bundle.js 中进行调试。切换选项卡后，后退按钮的状态似乎发生了变化。因此，如果我们从嵌套视图转到新选项卡，标题会缩进。这也是一个相关的错误。

标签： javascript angularjs cordova-3 ionic-framework

【解决方案1】：

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

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

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

控制器示例

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

【讨论】：

将showBackButton 设置为false 将在所有情况下都停止显示返回按钮，对吗？我希望它显示出来。只需禁用历史记录（并在第一次单击时打开主选项卡视图）或正确放置显示返回按钮。请参阅here，它已被接受为错误并等待解决。我会尽量努力。

【解决方案2】：

如果您只使用 Angular 路由，请使用以下方法

$route.reload()

如果您在 Ionic 上使用 UI-Router，您也可以使用以下功能

$state.go($state.current, {}, {reload: true});

【讨论】：