在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浏览器中调试而带来的不同。