diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js index 6d45229b68..f8d3c0d126 100644 --- a/ionic/components/nav/nav-base.js +++ b/ionic/components/nav/nav-base.js @@ -11,7 +11,7 @@ import {bind} from 'angular2/di'; import {NavController} from './nav-controller'; import {NavItem, NavParams} from './nav-item'; -import {Pane, NavBarSection} from './pane'; +import {Pane, NavBarContainer} from './pane'; import {Transition} from '../../transitions/transition'; import {ClickBlock} from '../../util/click-block'; import * as util from 'ionic/util'; @@ -80,7 +80,7 @@ export class NavBase { // decide which sections should be added to this Pane, ie: nav bars, tab bars, etc. // add only the sections it needs if (itemStructure.navbar) { - sectionsToAdd.push(NavBarSection); + sectionsToAdd.push(NavBarContainer); } // add the sections which this type of Pane requires @@ -476,6 +476,18 @@ export class NavBase { return this.domElement; } + navbarViewContainer(nbContainer) { + if (nbContainer) { + this._nbContainer = nbContainer; + } + if (this._nbContainer) { + return this._nbContainer; + } + if (this.parent) { + return this.parent.navbarViewContainer(); + } + } + add(item) { item.id = this.id + '' + (++this.childIds); this.items.push(item); diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js index a366d63fcf..f3e32ba13a 100644 --- a/ionic/components/nav/nav-item.js +++ b/ionic/components/nav/nav-item.js @@ -31,28 +31,30 @@ export class NavItem { } stage(callback) { - // update if it's possible to go back from this nav item - this.enableBack = this.nav && !!this.nav.getPrevious(this); + let nav = this.nav; - if (this.instance) { + // update if it's possible to go back from this nav item + this.enableBack = nav && !!nav.getPrevious(this); + + if (this.instance || !nav) { // already compiled this view return callback(); } // compile the Component - this.nav.compiler.compileInHost(this.ComponentClass).then(componentProtoViewRef => { + nav.compiler.compileInHost(this.ComponentClass).then(componentProtoViewRef => { // figure out the sturcture of this Component // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars? let itemStructure = getProtoViewStructure(componentProtoViewRef); // get the appropriate Pane which this NavItem will fit into - this.nav.getPane(itemStructure, pane => { + nav.getPane(itemStructure, pane => { // create a new injector just for this NavItem - let injector = this.nav.injector.resolveAndCreateChild([ + let injector = nav.injector.resolveAndCreateChild([ bind(NavBase).toValue(this.nav), - bind(NavController).toValue(this.nav.navCtrl), + bind(NavController).toValue(nav.navCtrl), bind(NavParams).toValue(new NavParams(this.params)), bind(NavItem).toValue(this) ]); @@ -63,13 +65,15 @@ export class NavItem { let newLocation = new ElementRef(hostViewRef, 0); - this.setInstance( this.nav.loader._viewManager.getComponent(newLocation) ); + this.setInstance( nav.loader._viewManager.getComponent(newLocation) ); this.setViewElement( hostViewRef._view.render._view.rootNodes[0] ); this.disposals.push(() => { viewContainer.remove( viewContainer.indexOf(hostViewRef) ); }); + // get the view's context so when creating the navbar + // it uses the same context as the content let context = { boundElementIndex: 0, parentView: { @@ -77,18 +81,26 @@ export class NavItem { } }; - // add only the sections it needs - let navbarViewContainer = pane.sections.navbar.viewContainerRef; - if (navbarViewContainer && itemStructure.navbar && this.protos.navbar) { - this.navbarView = navbarViewContainer.create(this.protos.navbar, -1, context, injector); + // get the item container's nav bar + let navbarViewContainer = nav.navbarViewContainer(); + + // get the item's navbar protoview + let navbarProtoView = this.protos.navbar; + + // add a navbar view if the pane has a navbar container, and the + // item's instance has a navbar protoview to go to inside of it + if (navbarViewContainer && navbarProtoView) { + this.navbarView = navbarViewContainer.create(navbarProtoView, -1, context, injector); this.disposals.push(() => { navbarViewContainer.remove( navbarViewContainer.indexOf(this.navbarView) ); }); } + // this item has finished loading this.loaded(); + // all done, fire the callback callback(); }); @@ -128,8 +140,9 @@ export class NavItem { } navbarElement() { - if (this.navbarView && this.navbarView._view) { - return this.navbarView._view.render._view.rootNodes[0]; + let navbarView = this.navbarView; + if (navbarView && navbarView._view) { + return navbarView._view.render._view.rootNodes[0]; } } diff --git a/ionic/components/nav/pane.js b/ionic/components/nav/pane.js index 195c931399..e93143ef87 100644 --- a/ionic/components/nav/pane.js +++ b/ionic/components/nav/pane.js @@ -5,6 +5,7 @@ import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref'; import {ElementRef} from 'angular2/src/core/compiler/element_ref'; import {Nav} from './nav'; +import {NavBase} from './nav-base'; import {SwipeHandle} from './swipe-handle'; @@ -57,25 +58,18 @@ class PaneContentAnchor { } }) @View({ - template: ` - - `, - directives: [PaneSectionAnchor] + template: ``, + directives: [NavBarAnchor] }) -export class NavBarSection { - constructor(@Parent() pane: Pane, viewContainerRef: ViewContainerRef, elementRef: ElementRef) { - this.pane = pane; - pane.addSection('navbar', this); - } -} +export class NavBarContainer {} -// Reference point of where the guts of the NavBar should go next to +// Reference point of where individual view navbars will go next to @Directive({ - selector: 'template[section-anchor]' + selector: 'template[navbar-anchor]' }) -class PaneSectionAnchor { - constructor(@Parent() navBarSection: NavBarSection, viewContainerRef: ViewContainerRef) { - navBarSection.viewContainerRef = viewContainerRef; +class NavBarAnchor { + constructor(nav: NavBase, viewContainerRef: ViewContainerRef) { + nav.navbarViewContainer(viewContainerRef); } } diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js index 0ddcbb21ad..a13e90a97b 100644 --- a/ionic/components/tabs/tab.js +++ b/ionic/components/tabs/tab.js @@ -55,7 +55,7 @@ export class Tab extends NavBase { this.sections = tabs.parent.panes['_n'].sections; } - this.item = new NavItem(this); + this.item = new NavItem(tabs.parent); this.item.setInstance(this); this.item.setViewElement(elementRef.domElement); tabs.addTab(this.item); @@ -85,6 +85,7 @@ export class Tab extends NavBase { callback && callback(); }); this._loaded = true; + } else { callback && callback(); }