diff --git a/ionic/components/aside/aside.js b/ionic/components/aside/aside.js index f444303dc5..94992cb817 100644 --- a/ionic/components/aside/aside.js +++ b/ionic/components/aside/aside.js @@ -57,8 +57,8 @@ export class Aside { } onInit() { - console.log('Aside content', this.content); - this.contentElement = (this.content instanceof Node) ? this.content : this.content.ele; + this.contentElement = (this.content instanceof Node) ? this.content : this.content.getNativeElement(); + console.log('Aside content', this.content, this.contentElement); Aside.applyConfig(this); this.gestureDelegate = Aside.getDelegate(this, 'gesture'); diff --git a/ionic/components/content/content.js b/ionic/components/content/content.js index dcc7b4de8d..a931333f74 100644 --- a/ionic/components/content/content.js +++ b/ionic/components/content/content.js @@ -2,6 +2,8 @@ import {ElementRef} from 'angular2/angular2' import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; +import {Ion} from '../ion'; + @Component({ selector: 'ion-content' @@ -9,15 +11,12 @@ import {View} from 'angular2/src/core/annotations_impl/view'; @View({ template: `
` }) -export class Content { +export class Content extends Ion{ constructor(elementRef: ElementRef) { - // TODO(maxlynch): we need this nativeElement for things like aside, etc. - // but we should be able to stamp out this behavior with a base IonicComponent - // or something, so all elements have a nativeElement reference or a getElement() method - this.ele = elementRef.nativeElement; + super(elementRef); setTimeout(() => { - this.scrollElement = this.ele.children[0]; + this.scrollElement = elementRef.nativeElement.children[0]; }); } diff --git a/ionic/components/ion.js b/ionic/components/ion.js new file mode 100644 index 0000000000..927002c1e1 --- /dev/null +++ b/ionic/components/ion.js @@ -0,0 +1,15 @@ +/** + * Base class for all Ionic components. Exposes some common functionality + * that all Ionic components need, such as accessing underlying native elements and + * sending/receiving app-level events. + */ +export class Ion { + constructor(elementRef: ElementRef) { + console.log('ION INIT', elementRef); + this.elementRef = elementRef; + } + + getNativeElement() { + return this.elementRef.nativeElement; + } +} diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js index 8133c690db..235e289d65 100644 --- a/ionic/components/nav/nav.js +++ b/ionic/components/nav/nav.js @@ -23,9 +23,10 @@ export class Nav extends ViewController { constructor( @Optional() parentViewCtrl: ViewController, - injector: Injector + injector: Injector, + elementRef: ElementRef ) { - super(parentViewCtrl, injector); + super(parentViewCtrl, injector, elementRef); } onInit() { diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js index 935836f420..9bd27152df 100644 --- a/ionic/components/tabs/tab.js +++ b/ionic/components/tabs/tab.js @@ -38,7 +38,7 @@ export class Tab extends ViewController { // A Tab is both a container of many views, and is a view itself. // A Tab is one ViewItem within it's parent Tabs (which extends ViewController) // A Tab is a ViewController for its child ViewItems - super(tabs, injector); + super(tabs, injector, elementRef); this.tabs = tabs; this.childNavbar(true); diff --git a/ionic/components/tabs/tabs.js b/ionic/components/tabs/tabs.js index a12041060c..052ee9d603 100644 --- a/ionic/components/tabs/tabs.js +++ b/ionic/components/tabs/tabs.js @@ -2,7 +2,7 @@ import {Optional} from 'angular2/src/di/annotations_impl' import {Component, onInit} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; import {Injector} from 'angular2/di'; -import {NgFor} from 'angular2/angular2'; +import {NgFor, ElementRef} from 'angular2/angular2'; import {ViewController} from '../view/view-controller'; import {ViewItem} from '../view/view-item'; @@ -43,9 +43,10 @@ export class Tabs extends ViewController { constructor( @Optional() parentViewCtrl: ViewController, @Optional() viewItem: ViewItem, - injector: Injector + injector: Injector, + elementRef: ElementRef ) { - super(parentViewCtrl, injector); + super(parentViewCtrl, injector, elementRef); // 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.js b/ionic/components/view/view-controller.js index 7b90d12592..e76240707d 100644 --- a/ionic/components/view/view-controller.js +++ b/ionic/components/view/view-controller.js @@ -4,6 +4,7 @@ import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_compone import {AppViewManager} from 'angular2/src/core/compiler/view_manager'; import {Injector, bind} from 'angular2/di'; +import {Ion} from '../ion'; import {IonicApp} from '../app/app'; import {IonicRouter} from '../../routing/router'; import {ViewItem} from './view-item'; @@ -13,13 +14,14 @@ import {Transition} from '../../transitions/transition'; import {ClickBlock} from '../../util/click-block'; import * as util from 'ionic/util'; - -export class ViewController { +export class ViewController extends Ion { constructor( parentViewCtrl: ViewController, - injector: Injector + injector: Injector, + elementRef: ElementRef ) { + super(elementRef); this.parent = parentViewCtrl; diff --git a/ionic/components/view/view.js b/ionic/components/view/view.js index 24b090d655..561d033339 100644 --- a/ionic/components/view/view.js +++ b/ionic/components/view/view.js @@ -4,12 +4,14 @@ import {Optional} from 'angular2/src/di/annotations_impl' import {ViewItem} from './view-item'; +import {Ion} from '../ion'; @Directive({ selector: 'ion-view', }) -export class IonView { +export class IonView extends Ion { constructor(@Optional() item: ViewItem, elementRef: ElementRef) { + super(elementRef); this.ele = elementRef.nativeElement; } }