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();
}