关于ion-view的生命周期及相关事件-CSDN博客

本文链接：https://blog.csdn.net/wujinshizhu/article/details/49309855

在ionic的开发中，ion-view的生命周期中的事件触发是在必须要清楚了解的一个问题:

$ionicView.loaded 当view第一次被加载的时候触发，一般而言当view开启缓存的时候，一个view仅被创建一次。官方文档建议可以通过监听该事件对view进行一些前期的工作(如变量初始化等)

$ionicView.enter 进入view时触发，无论该view是第一次被创建后进入还是直接进入的缓存的view

$ionicView.leave 完全离开view时触发，无论此时view是被销毁了还是缓存了

$ionicView.beforeEnter 在$ionicView.enter前触发

$ionicView.beforeLeave 在$ionicView.leave前触发

$ionicView.afterEnter 在$ionicView.enter后触发

$ionicView.afterLeave 在$ionicView.leave后触发

$ionicView.unloaded 当view被销毁时触发

具体的使用方法如下：

rootModule.controller('ChatDetailCtrl', function($scope) {

    $scope.$on('$ionicView.enter',function(){
       console.log("enter");
    });

    $scope.$on('$ionicView.loaded',function(){
        console.log("loaded");
    });

    $scope.$on('$ionicView.leave',function(){
        console.log("leave");
    });

    $scope.$on('$ionicView.beforeEnter',function(){
        console.log("beforeEnter");
    });

    $scope.$on('$ionicView.beforeLeave',function(){
        console.log("beforeLeave");
    });

    $scope.$on('$ionicView.afterEnter',function(){
        console.log("afterEnter");
    });

    $scope.$on('$ionicView.afterLeave',function(){
        console.log("afterLeave");
    });

    $scope.$on('$ionicView.unloaded',function(){
        console.log("unloaded");
    });

});

测试：在未开启缓存的情况下，点击进入该view之后按返回键，结果如下：

loaded
beforeEnter
enter
afterEnter
beforeLeave
leave
afterLeave
unloaded

目前存在一个疑问，在按返回键之后会触发unloaded而不是将其进行缓存，按照官方文档的说法，ionic会默认缓存10个view，猜测可能是因为在chrom浏览器中调试而带来的不同。