feat(nav): detach ChangeDetectorRef during transition

ionic/components/nav/nav-controller.ts

@@ -1,4 +1,4 @@
-import {Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager, Renderer} from 'angular2/angular2';
+import {ChangeDetectorRef, Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
@@ -107,7 +107,8 @@ export class NavController extends Ion {
     loader: DynamicComponentLoader,
     viewManager: AppViewManager,
     zone: NgZone,
-    renderer: Renderer
+    renderer: Renderer,
+    cd: ChangeDetectorRef
   ) {
     super(elementRef, config);
 
@@ -121,6 +122,7 @@ export class NavController extends Ion {
     this._viewManager = viewManager;
     this._zone = zone;
     this._renderer = renderer;
+    this._cd = cd;
 
     this._views = [];
     this._trnsTime = 0;
@@ -579,7 +581,6 @@ export class NavController extends Ion {
    * @returns {any} TODO
    */
   _transition(enteringView, leavingView, opts, done) {
-    console.debug('_transition', enteringView, leavingView, opts);
     let self = this;
 
     if (enteringView === leavingView) {
@@ -594,7 +595,7 @@ export class NavController extends Ion {
     }
 
     if (!enteringView) {
-      // if not entering view then create a bogus one
+      // if no entering view then create a bogus one
       enteringView = new ViewController()
       enteringView.loaded();
     }
@@ -640,6 +641,13 @@ export class NavController extends Ion {
         self.app.setEnabled(enableApp, duration);
         self.setTransitioning(!enableApp, duration);
 
+        if (!enableApp) {
+          // do a quick check for changes
+          // then detach the change detection during a transition
+          self._cd.detectChanges();
+          self._cd.detach();
+        }
+
         if (opts.pageType) {
           transAnimation.before.addClass(opts.pageType);
         }
@@ -658,10 +666,20 @@ export class NavController extends Ion {
             leavingView.didLeave();
           }
 
-          // all done!
+          // reattach the change detection
+          self._cd.reattach();
+
           self._zone.run(() => {
-            self._transComplete();
+            if (self.keyboard.isOpen()) {
-            done(enteringView);
+              self.keyboard.onClose(() => {
+                self._transComplete();
+                done(enteringView);
+              }, 32);
+
+            } else {
+              self._transComplete();
+              done(enteringView);
+            }
           });
         });
 
@@ -669,15 +687,7 @@ export class NavController extends Ion {
 
     }
 
-    // wait for the new view to complete setup
+    self._stage(enteringView, beginTransition);
-    if (self.keyboard.isOpen()) {
-      self._stage(enteringView, () => {
-        self.keyboard.onClose(beginTransition, 64);
-      });
-
-    } else {
-      self._stage(enteringView, beginTransition);
-    }
   }
 
   /**

ionic/components/nav/nav.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, DynamicComponentLoader, Renderer, ViewContainerRef} from 'angular2/angular2';
+import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, DynamicComponentLoader, Renderer, ViewContainerRef} from 'angular2/angular2';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
@@ -120,9 +120,11 @@ export class Nav extends NavController {
     loader: DynamicComponentLoader,
     viewManager: AppViewManager,
     zone: NgZone,
-    renderer: Renderer
+    renderer: Renderer,
+    cd: ChangeDetectorRef
   ) {
-    super(hostNavCtrl, app, config, keyboard, elementRef, compiler, loader, viewManager, zone, renderer);
+    super(hostNavCtrl, app, config, keyboard, elementRef, compiler,
+          loader, viewManager, zone, renderer, cd);
 
     if (viewCtrl) {
       // an ion-nav can also act as an ion-page within a parent ion-nav

ionic/components/nav/test/basic/index.ts

@@ -233,10 +233,18 @@ class AnotherPage {
 
 @App({
   pages: [FirstPage, FullPage, PrimaryHeaderPage, AnotherPage],
-  template: `<ion-nav [root]="root"></ion-nav>`
+  template: `<ion-nav [root]="root"></ion-nav>`,
+  host: {
+    '[class.is-change-detecting]': 'isChangeDetecting'
+  }
 })
 class E2EApp {
   constructor() {
     this.root = FirstPage;
   }
+
+  get isChangeDetecting() {
+    console.log('isChangeDetecting');
+    return true;
+  }
 }

ionic/components/tabs/tab.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer} from 'angular2/angular2';
+import {ChangeDetectorRef, Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer} from 'angular2/angular2';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
@@ -79,10 +79,13 @@ export class Tab extends NavController {
     loader: DynamicComponentLoader,
     viewManager: AppViewManager,
     zone: NgZone,
-    renderer: Renderer
+    renderer: Renderer,
+    cd: ChangeDetectorRef
   ) {
     // A Tab is a NavController for its child pages
-    super(parentTabs, app, config, keyboard, elementRef, compiler, loader, viewManager, zone, renderer);
+    super(parentTabs, app, config, keyboard, elementRef, compiler,
+          loader, viewManager, zone, renderer, cd);
+
     this._isInitial = parentTabs.add(this);
 
     this._panelId = 'tabpanel-' + this.id;

ionic/util/keyboard.ts

@@ -2,7 +2,7 @@ import {Injectable, NgZone} from 'angular2/angular2';
 
 import {Config} from '../config/config';
 import {Form} from './form';
-import {hasFocusedTextInput, raf} from './dom';
+import {hasFocusedTextInput, raf, rafFrames} from './dom';
 
 
 @Injectable()
@@ -35,9 +35,11 @@ export class Keyboard {
 
       function checkKeyboard() {
         if (!self.isOpen()) {
-          self.zone.run(() => {
+          rafFrames(30, () => {
-            console.debug('keyboard closed');
+            self.zone.run(() => {
-            callback();
+              console.debug('keyboard closed');
+              callback();
+            });
           });
 
         } else {
@@ -47,7 +49,7 @@ export class Keyboard {
 
       setTimeout(checkKeyboard, pollingInternval);
     });
-    
+
     return promise;
   }