Question

将现有的Ionic项目从1.13-beta更新为1.14-beta后，我遇到了一些我无法解释的行为。从一个视图状态更改为另一个视图状态时，旧视图不会离开页面。在记录角度ui路由器事件和离子导航事件时，我注意到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>

Answer 1

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

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

在添加侦听器之前，您的视图可能会被缓存，而且事件永远不会被触发。但由于你的父母......嗯......父母，所以当你离开任何一个孩子时，它的离开事件就会被触发。我还没有正式测试过，这只是一种预感。要进行测试，请尝试通过将 cache-view =“false”添加到离子视图声明来告知离子不缓存视图。

请参阅文档here。

Answer 2

如果您的视图使用<ion-tab>打包在标签中，则需要注册$ionicNavView - 活动：

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

Answer 3

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

我的案例$ionicView.leave在嵌套视图中工作，但在标签之间移动时没有$ionicParentView.leave，所以我用其他解决方案来解决这个问题。

<强>解决方案：在MAIN控制器上我添加了：

$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') 

     }
});

希望有所帮助

Answer 4

发现问题。 “Main”状态的定义没有属性

abstract: true

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

离子 - 查看离开事件从未被调用

4 个答案: