diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index bf13a6c18a..df57bda1c4 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -1,4 +1,4 @@ -import {Directive, View, ElementRef, Host, Optional, forwardRef, Injector} from 'angular2/angular2'; +import {Directive, View, ElementRef, Host, Optional, forwardRef, Injector, NgZone} from 'angular2/angular2'; import {IonicComponent} from '../../config/annotations'; import {ViewController} from '../view/view-controller'; @@ -22,9 +22,10 @@ export class Nav extends ViewController { constructor( @Optional() hostViewCtrl: ViewController, injector: Injector, - elementRef: ElementRef + elementRef: ElementRef, + zone: NgZone ) { - super(hostViewCtrl, injector, elementRef); + super(hostViewCtrl, injector, elementRef, zone); } onIonInit() { diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index c2ac0fcd5e..86afad2d96 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -1,4 +1,4 @@ -import {Directive, Component, View, Host, ElementRef, forwardRef, Injector} from 'angular2/angular2'; +import {Directive, Component, View, Host, ElementRef, forwardRef, Injector, NgZone} from 'angular2/angular2'; import {ViewController} from '../view/view-controller'; import {ViewItem} from '../view/view-item'; @@ -29,12 +29,13 @@ export class Tab extends ViewController { constructor( @Host() tabs: Tabs, elementRef: ElementRef, - injector: Injector + injector: Injector, + zone: NgZone ) { // A Tab is both a container of many views, and is a view itself. // A Tab is one ViewItem within it's Host Tabs (which extends ViewController) // A Tab is a ViewController for its child ViewItems - super(tabs, injector, elementRef); + super(tabs, injector, elementRef, zone); this.tabs = tabs; this.childNavbar(true); diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index a2c5a7af88..7ee93e0d81 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -1,4 +1,4 @@ -import {Component, Directive, View, Injector, NgFor, ElementRef, Optional, Host, forwardRef} from 'angular2/angular2'; +import {Component, Directive, View, Injector, NgFor, ElementRef, Optional, Host, forwardRef, NgZone} from 'angular2/angular2'; import {ViewController} from '../view/view-controller'; import {ViewItem} from '../view/view-item'; @@ -33,9 +33,10 @@ export class Tabs extends ViewController { @Optional() hostViewCtrl: ViewController, @Optional() viewItem: ViewItem, injector: Injector, - elementRef: ElementRef + elementRef: ElementRef, + zone: NgZone ) { - super(hostViewCtrl, injector, elementRef); + super(hostViewCtrl, injector, elementRef, zone); // Tabs may also be an actual ViewItem which was navigated to // if Tabs is static and not navigated to within a ViewController diff --git a/ionic/components/view/view-controller.ts b/ionic/components/view/view-controller.ts index 539e4317a7..bbc824adfb 100644 --- a/ionic/components/view/view-controller.ts +++ b/ionic/components/view/view-controller.ts @@ -1,4 +1,4 @@ -import {Compiler, ElementRef, Injector, bind} from 'angular2/angular2'; +import {Compiler, ElementRef, Injector, bind, NgZone} from 'angular2/angular2'; import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader'; import {AppViewManager} from 'angular2/src/core/compiler/view_manager'; @@ -19,7 +19,8 @@ export class ViewController extends Ion { constructor( parentViewCtrl: ViewController, injector: Injector, - elementRef: ElementRef + elementRef: ElementRef, + zone: NgZone ) { let config = injector.get(IonicConfig); super(elementRef, config); @@ -32,6 +33,7 @@ export class ViewController extends Ion { this.router = injector.get(IonicRouter); this.app = injector.get(IonicApp); this.config = config; + this.zone = zone; this.router.addViewController(this); @@ -215,51 +217,57 @@ export class ViewController extends Ion { // wait for the new item to complete setup enteringItem.stage(() => { - enteringItem.shouldDestroy = false; - enteringItem.shouldCache = false; - enteringItem.willEnter(); - leavingItem.willLeave(); + this.zone.runOutsideAngular(() => { - // set that the new item pushed on the stack is staged to be entering/leaving - // staged state is important for the transition to find the correct item - enteringItem.state = STAGED_ENTERING_STATE; - leavingItem.state = STAGED_LEAVING_STATE; + enteringItem.shouldDestroy = false; + enteringItem.shouldCache = false; + enteringItem.willEnter(); + leavingItem.willLeave(); - // init the transition animation - let transAnimation = Transition.create(this, opts); - if (!opts.animate) { - // force it to not animate the elements, just apply the "to" styles - transAnimation.duration(0); - } + // set that the new item pushed on the stack is staged to be entering/leaving + // staged state is important for the transition to find the correct item + enteringItem.state = STAGED_ENTERING_STATE; + leavingItem.state = STAGED_LEAVING_STATE; - let duration = transAnimation.duration(); - if (duration > 64) { - // block any clicks during the transition and provide a - // fallback to remove the clickblock if something goes wrong - ClickBlock(true, duration + 200); - } + // init the transition animation + let transAnimation = Transition.create(this, opts); + if (!opts.animate) { + // force it to not animate the elements, just apply the "to" styles + transAnimation.duration(0); + } - // start the transition - transAnimation.play().then(() => { + let duration = transAnimation.duration(); + if (duration > 64) { + // block any clicks during the transition and provide a + // fallback to remove the clickblock if something goes wrong + ClickBlock(true, duration + 200); + } - // transition has completed, update each item's state - enteringItem.state = ACTIVE_STATE; - leavingItem.state = CACHED_STATE; + // start the transition + transAnimation.play().then(() => { - // dispose any items that shouldn't stay around - transAnimation.dispose(); + // transition has completed, update each item's state + enteringItem.state = ACTIVE_STATE; + leavingItem.state = CACHED_STATE; - enteringItem.didEnter(); - leavingItem.didLeave(); + // dispose any items that shouldn't stay around + transAnimation.dispose(); - // all done! - this.transitionComplete(); + enteringItem.didEnter(); + leavingItem.didLeave(); + + // all done! + this.zone.run(() => { + this.transitionComplete(); + callback(); + }); + }); - callback(); }); - }); - } + } + + }); swipeBackStart() { if (this.isTransitioning() || this.items.length < 2) {