Ionic - 查看从未调用过的休假事件答案

【问题标题】：Ionic - View Leave Events Never CalledIonic - 查看从未调用过的休假事件
【发布时间】：2017-03-20 21:53:44
【问题描述】：

将现有的 Ionic 项目从 1.13-beta 更新到 1.14-beta 后，我遇到了一些我无法解释的行为。从一种视图状态更改为另一种视图状态时，旧视图不会离开页面。在记录 Angular ui 路由器事件和 Ionic 导航事件后，我注意到 Ionic 的退出事件没有被触发：

$ionicView.leave
$ionicView.beforeLeave
$ionicView.afterLeave

文档：(http://ionicframework.com/blog/navigating-the-changes/)

有没有其他人经历过类似的行为？如果是这样，您有没有找到解决此问题的方法？

触发的事件：

$stateChangeStart: App.LoadApp.Input -> App.Main.QrToken
$viewContentLoading: Main
$viewContentLoading: QrToken
$stateChangeSuccess: App.LoadApp.Input -> App.Main.QrToken
$ionicView.beforeEnter
$ionicView.afterEnter
$ionicView.enter

如果我不将它嵌套在 Main 中，我可以在 QrToken 视图中加载，所以我相信问题出在那儿。任何人都可以看看我的主模板并帮助我找到解决方案。

<div ng-controller="fbMenuController">
    <ion-side-menus>

        <!-- Left menu -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar-dark">
                <h1 class="title">Menu</h1>
            </ion-header-bar>
            <ion-content scroll="true">
                <div ng-repeat="Group in fb.Model.MenuGroups">
                    <ion-item class="item-divider">{{Group.Name}}</ion-item>
                    <!-- href="#/Main/{{Page.Name}}" -->
                    <a ng-repeat="Page in Group.Items" nav-transition="android" nav-direction="swap" class="item" ng-click="fb.SelectPage(Page.State)">
                        {{ Page.Name }}
                    </a>
                </div>

            </ion-content>

        </ion-side-menu>

        <!-- Center content -->
        <ion-side-menu-content>
            <ion-header-bar class="bar-dark" ng-show="fb.Model.ShowHeader">
                <div class="buttons">
                    <button class="button-icon icon ion-navicon" ng-click="fb.ToggleLeftMenu()"></button>
                </div>
                <h1 class="title">{{ fb.Model.ActivePage.Name }}</h1>
            </ion-header-bar>

            <ion-content scroll="true">
                <ion-nav-view name="Main">

                </ion-nav-view>
            </ion-content>
        </ion-side-menu-content>

    </ion-side-menus>
</div>

【问题讨论】：

看看我下面列出的解决方案 => stackoverflow.com/questions/28938408/…

标签： ionic

【解决方案1】：

如果您的视图使用<ion-tab> 包装在选项卡中，则需要注册$ionicNavView-Events：

 $scope.$on("$ionicNavView.leave")

【讨论】：

【解决方案2】：

这是一个未解决的问题https://github.com/driftyco/ionic/issues/2869，可能在 view-cache="false" 时发生。

在我的情况下，$ionicView.leave 在嵌套视图中工作，但在选项卡之间移动时却没有，$ionicParentView.leave 也没有，所以我想出了另一个解决方案。

解决方案： 在主控制器上我添加了：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
     if (fromState.name === 'name-of-leaving-state') {

      //your code here, similar behavior with .$on('$ionicView.leave') 

     }
});

希望对你有帮助

【讨论】：

【解决方案3】：

前几天我遇到了这个问题。我正在我的子控制器上监听事件。当我将监听器移到父级时，它起作用了。我不太确定为什么，但现在我想我知道为什么了。这是因为 Ionic 缓存视图的方式。特别是文档中的这一行：

如果视图离开但被缓存，则此事件不会再次触发后续观看。

您的视图可能在您添加侦听器之前已被缓存，并且离开事件从未触发。但是由于您的父母是……嗯……父母，因此只要您离开任何孩子，就会触发其离开事件。我没有正式测试过，这只是一个预感。要进行测试，请尝试通过将 cache-view="false" 添加到您的 ion-view 声明中来告诉 ionic 不要缓存视图。

请参阅文档here。

【讨论】：

【解决方案4】：

发现问题。 'Main' 状态是在没有属性的情况下定义的

abstract: true

这在 Ionic 1.13-beta 中有效，但在 Ionic 1.14-beta 中明显中断。在 Ionic、AngularJS 或 Angular-ui-router 上的任何迁移帖子中都没有发现这种变化，所以我不知道为什么会这样解决它。如果有人能详细说明这种情况下的行为，我将不胜感激，但现在我有一个解决方案。

【讨论】：