diff --git a/ionic/components/action-menu/action-menu.js b/ionic/components/action-menu/action-menu.js index 523586f4c6..5358a399bd 100644 --- a/ionic/components/action-menu/action-menu.js +++ b/ionic/components/action-menu/action-menu.js @@ -1,12 +1,14 @@ -import {DynamicComponentLoader, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2'; +import {DynamicComponentLoader, ComponentLaoder, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2'; import {bind, Injector} from 'angular2/di'; import {Promise} from 'angular2/src/facade/async'; import {isPresent, Type} from 'angular2/src/facade/lang'; -import {Component, Directive, Item, Icon} from 'angular2/src/core/annotations_impl/annotations'; +import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; import {Parent} from 'angular2/src/core/annotations_impl/visibility'; +import {Item, Icon} from 'ionic/ionic' +import {Ionic} from 'ionic/components/app/app' import {IonicComponent} from 'ionic/config/component' import {raf, ready} from 'ionic/util/dom' @@ -47,15 +49,22 @@ import {Animation} from 'ionic/animations/animation'; directives: [Item,Icon] }) export class ActionMenu { - constructor( - elementRef: ElementRef - ) { + constructor(elementRef: ElementRef) { this.domElement = elementRef.domElement this.config = ActionMenu.config.invoke(this) + console.log('ActionMenu: Component Created', this.domElement); } static open(opts) { - console.log('Opening menu', opts); + console.log('Opening menu', opts, Ionic); + + ActionMenu._inject(); + } + + static _inject() { + Ionic.appendToRoot(ActionMenu).then(() => { + console.log('Action Menu appended'); + }) } } diff --git a/ionic/components/action-menu/test/basic/index.js b/ionic/components/action-menu/test/basic/index.js index 43d376a64e..3e17188dec 100644 --- a/ionic/components/action-menu/test/basic/index.js +++ b/ionic/components/action-menu/test/basic/index.js @@ -1,4 +1,4 @@ -import {bootstrap} from 'angular2/angular2' +import {bootstrap, ElementRef} from 'angular2/angular2' import {Component} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; @@ -11,10 +11,10 @@ import {ActionMenu} from 'ionic/components/action-menu/action-menu'; templateUrl: 'main.html', directives: [Button, Content] }) -class IonicApp extends Ionic { - constructor() { - super(); +class IonicApp { + constructor(elementRef: ElementRef) { console.log('IonicApp Start') + Ionic.setRootElementRef(elementRef); } openMenu() { @@ -27,6 +27,6 @@ class IonicApp extends Ionic { export function main() { bootstrap(IonicApp).then((appRef) => { - appRef.hostComponent.setAppRef(appRef); + Ionic.setAppRef(appRef); }) } diff --git a/ionic/components/app/app.js b/ionic/components/app/app.js index 676b3c1049..1b1ece2973 100644 --- a/ionic/components/app/app.js +++ b/ionic/components/app/app.js @@ -1,15 +1,48 @@ -import {ApplicationRef} from 'angular2/angular2'; +import {DynamicComponentLoader, ComponentLaoder, ElementRef, ComponentRef, onDestroy, DomRenderer, ApplicationRef} from 'angular2/angular2'; +import {Promise} from 'angular2/src/facade/async'; +import {isPresent, Type} from 'angular2/src/facade/lang'; -export class Ionic { +class IonicAppRoot { constructor() { - } setAppRef(appRef: ApplicationRef) { this.appRef = appRef; - console.log('Got app ref', appRef); + console.log('IonicApp: setAppRef', appRef); } getAppRef() { return this.appRef; } + + setRootElementRef(elementRef: ElementRef) { + this.rootElementRef = elementRef; + console.log('IonicApp: setRootElementRef', elementRef); + } + getRootElementRef() { + return this.rootElementRef; + } + + appendToRoot(Component: Type) { + var appRef = Ionic.getAppRef(); + var injector = appRef.injector; + var loader = injector.get(DynamicComponentLoader); + var renderer = injector.get(DomRenderer); + var elementRef = Ionic.getRootElementRef(); + + console.log('Ionic: appendToRoot', loader, renderer, elementRef); + + var promise = new Promise(resolve => { + return loader.loadIntoNewLocation(Component, elementRef).then((containerRef) => { + var newEl = renderer.getHostElement(containerRef.hostView.render); + + document.body.querySelector('ion-app').appendChild(newEl); + + resolve(newEl); + }); + }); + + return promise; + } } + +export let Ionic = new IonicAppRoot();