fix(viewSwitcher): Broadcast view transition events in a consistent o…

…rder Closes #3804
ionic-team · Jun 12, 2015 · f78b1b3 · f78b1b3
1 parent ebfb1ba
commit f78b1b3
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 19 deletions.
diff --git a/js/angular/service/viewSwitcher.js b/js/angular/service/viewSwitcher.js
@@ -297,29 +297,32 @@ function($timeout, $document, $q, $ionicClickBlock, $ionicConfig, $ionicNavBarDe
         },
 
         emit: function(step, enteringData, leavingData) {
-          var scope = enteringEle.scope();
-          if (scope) {
-            scope.$emit('$ionicView.' + step + 'Enter', enteringData);
-            if (step == 'after') {
-              scope.$emit('$ionicView.enter', enteringData);
-            }
-          }
+          var enteringScope = enteringEle.scope(),
+            leavingScope = leavingEle && leavingEle.scope();
 
-          if (leavingEle) {
-            scope = leavingEle.scope();
-            if (scope) {
-              scope.$emit('$ionicView.' + step + 'Leave', leavingData);
-              if (step == 'after') {
-                scope.$emit('$ionicView.leave', leavingData);
-              }
+          if (step == 'after') {
+            if (enteringScope) {
+              enteringScope.$emit('$ionicView.enter', enteringData);
             }
 
-          } else if (scope && leavingData && leavingData.viewId) {
-            scope.$emit('$ionicNavView.' + step + 'Leave', leavingData);
-            if (step == 'after') {
-              scope.$emit('$ionicNavView.leave', leavingData);
+            if (leavingScope) {
+              leavingScope.$emit('$ionicView.leave', leavingData);
+
+            } else if (enteringScope && leavingData && leavingData.viewId) {
+              enteringScope.$emit('$ionicNavView.leave', leavingData);
             }
           }
+
+          if (enteringScope) {
+            enteringScope.$emit('$ionicView.' + step + 'Enter', enteringData);
+          }
+
+          if (leavingScope) {
+            leavingScope.$emit('$ionicView.' + step + 'Leave', leavingData);
+
+          } else if (enteringScope && leavingData && leavingData.viewId) {
+            enteringScope.$emit('$ionicNavView.' + step + 'Leave', leavingData);
+          }
         },
 
         cleanup: function(transData) {

diff --git a/test/unit/angular/directive/navView.unit.js b/test/unit/angular/directive/navView.unit.js
@@ -900,7 +900,7 @@ describe('Ionic nav-view', function() {
     expect(afterLeave.stateName).toEqual('page1');
     expect(leave.stateName).toEqual('page1');
     expect(leave.transitionId).toEqual(2);
-
+    
     $state.go(page1State);
     $q.flush();
     $timeout.flush();
@@ -1009,6 +1009,59 @@ describe('Ionic nav-view', function() {
 
     expect(unloadedEvent.stateName).toEqual('tabAbstract.tab3page1');
   }));
+
+  it('should emit $ionicView events in correct order', inject(function ($state, $q, $timeout, $compile, $ionicConfig) {
+    $ionicConfig.views.maxCache(0);
+
+    var order = [];
+    scope.$on('$ionicView.loaded', function(ev, d){
+      order.push('$ionicView.loaded');
+    });
+    scope.$on('$ionicView.beforeEnter', function(ev, d){
+      order.push('$ionicView.beforeEnter');
+    });
+    scope.$on('$ionicView.enter', function(ev, d){
+      order.push('$ionicView.enter');
+    });
+    scope.$on('$ionicView.afterEnter', function(ev, d){
+      order.push('$ionicView.afterEnter');
+    });
+    scope.$on('$ionicView.beforeLeave', function(ev, d){
+      order.push('$ionicView.beforeLeave');
+    });
+    scope.$on('$ionicView.leave', function(ev, d){
+      order.push('$ionicView.leave');
+    });
+    scope.$on('$ionicView.afterLeave', function(ev, d){
+      order.push('$ionicView.afterLeave');
+    });
+    scope.$on('$ionicView.unloaded', function(ev, d){
+      order.push('$ionicView.unloaded');
+    });
+
+    elem.append($compile('<div><ion-nav-view></ion-nav-view></div>')(scope));
+
+    $state.go(page1State);
+    $q.flush();
+    $timeout.flush();
+
+    $state.go(page2State);
+    $q.flush();
+    $timeout.flush();
+
+    expect(order[0]).toEqual('$ionicView.loaded');
+    expect(order[1]).toEqual('$ionicView.beforeEnter');
+    expect(order[2]).toEqual('$ionicView.enter');
+    expect(order[3]).toEqual('$ionicView.afterEnter');
+    expect(order[4]).toEqual('$ionicView.loaded');
+    expect(order[5]).toEqual('$ionicView.beforeEnter');
+    expect(order[6]).toEqual('$ionicView.beforeLeave');
+    expect(order[7]).toEqual('$ionicView.enter');
+    expect(order[8]).toEqual('$ionicView.leave');
+    expect(order[9]).toEqual('$ionicView.afterEnter');
+    expect(order[10]).toEqual('$ionicView.afterLeave');
+    expect(order[11]).toEqual('$ionicView.unloaded');
+  }));
 
   it('should clear ion-nav-view cache', inject(function ($state, $q, $timeout, $compile, $ionicHistory) {
     elem.append($compile('<div><ion-nav-view></ion-nav-view></div>')(scope));