Question

使用侧边菜单和标签时，我遇到了离子及其历史堆栈的麻烦。

我在这里创建了一个plunker示例：http://embed.plnkr.co/XK6seY9mDypTW6GcsCpj/preview

要解决问题的步骤：

打开侧边菜单
导航至＆＃34;主列表＆＃34;
选择其中一项
您将被重定向到详细信息页面的常规数据标签

问题在于离子本身在导航中没有显示后退按钮。我创建了一个自己的后退按钮，调用 $ ionicGoBack（$ event）来查看离子是否具有历史堆栈。但是，当点击此按钮时，您会看到离子不会导航回主列表，而是您将保留在详细信息页面的常规数据选项卡上。

谁能告诉我这是什么问题？我知道标签有自己的历史堆栈，但标签应该知道它的祖先，还是我错了？

非常感谢您的帮助！

祝你好运

Answer 1

这是因为menu-close指令重置历史堆栈（如here所述）。

如果从元素中删除“menu-close”，则会保留历史记录，但会丢失一些预期的行为。

作为解决方案，您可以开发自己的指令（比如说“menu-close-keep-history”）来替换“菜单关闭”指令。

myModule.directive('menuCloseKeepHistory', ['$ionicHistory', function($ionicHistory) {
    return {
        restrict: 'AC',
        link: function($scope, $element) {
            $element.bind('click', function() {
                var sideMenuCtrl = $element.inheritedData('$ionSideMenusController');
                if (sideMenuCtrl) {
                    $ionicHistory.nextViewOptions({
                        historyRoot: false,
                        disableAnimate: true,
                        expire: 300
                    });
                    sideMenuCtrl.close();
                }
            });
        }
    };
}]);

这应该可以解决问题。

Answer 2

好吧，可以使用，而不是自定义指令 playbook.yml 代替 menu-toggle 当你使用

菜单肘节

ionic会跟踪您的导航历史记录

Answer 3

每个离子标签都有it's own history stack 。当您点击列表中的某个项目并转到general-data /：id时，您将创建一个新的历史堆栈 - 请注意每个选项卡都有自己的离子导航视图。

我之前遇到过这种情况，只是使用了标签css样式并将ng-click或ng-href附加到每个标签页并继续处理当前历史记录堆栈，并可能重复使用标签栏作为模板或指令。

希望有所帮助！

Answer 4

我发现的只是一个小小的黑客。如果您不希望选项卡具有自己的历史堆栈。只需在离子标签上方添加一个div。

EG：

<div ng-show="vm.loading">
  <div style="width: 50px; margin: 0 auto;">
    <ion-spinner></ion-spinner>
  </div>
</div>

<ion-tabs data-ng-controller="something as vm" ng-hide="vm.loading">

Answer 5

如果历史堆栈没有后视图，您可以随时覆盖所有控制器的$ ionicGoBack，然后设置默认视图。

E.g。

$rootScope.$ionicGoBack = function() {
        if( $ionicHistory.backView() == null || !angular.isDefined($ionicHistory.backView()) ){
            $state.go("app.default", {});           
        }else{
            $ionicHistory.goBack();
        }
    };

Answer 6

我做了这样的事情：

HTML：

<ion-back-button (click)="onBack()"></ion-back-button>

TS：

onBack(){
  window.history.back();
}

使用侧边菜单和选项卡时的离子历史堆栈

6 个答案: