Use directive instead of elementRef

Author: vakrilov

ng-sample/app/examples/modal/modal-content.ts

@@ -0,0 +1,35 @@
+import {Component} from 'angular2/core';
+import {ModalDialogParams} from "../../nativescript-angular/directives/dialogs";
+
+@Component({
+    selector: 'modal-content',
+    template: `
+    <StackLayout margin="24" horizontalAlignment="center" verticalAlignment="center">
+        <Label [text]="prompt"></Label>
+        <StackLayout orientation="horizontal" marginTop="12">
+            <Button text="ok" (tap)="close('OK')"></Button>
+            <Button text="cancel" (tap)="close('Cancel')"></Button>
+        </StackLayout>
+    </StackLayout>
+    `
+})
+export class ModalContent {
+    public prompt: string;
+    constructor(private params: ModalDialogParams) {
+        console.log("ModalContent.constructor: " + JSON.stringify(params))
+        this.prompt = params.context.promptMsg;
+    }
+
+    public close(res: string) {
+        this.params.closeCallback(res);
+    }
+
+    ngOnInit() {
+        console.log("ModalContent.ngOnInit");
+
+    }
+
+    ngOnDestroy() {
+        console.log("ModalContent.ngOnDestroy");
+    }
+}

ng-sample/app/examples/modal/modal-test.ts

@@ -1,48 +1,14 @@
-import {Component, DynamicComponentLoader, ElementRef, Injector, provide, Type, Injectable, Host, ComponentRef} from 'angular2/core';
-import {Page, ShownModallyData} from 'ui/page';
-import {View} from 'ui/core/view';
+import {Component} from 'angular2/core';
 import * as dialogs from "ui/dialogs";
-import {ModalDialogService, ModalDialogOptions, ModalDialogParams} from "../../nativescript-angular/services/dialogs";
-
-@Component({
-    selector: 'modal-content',
-    template: `
-    <StackLayout margin="24" horizontalAlignment="center" verticalAlignment="center">
-        <Label [text]="prompt"></Label>
-        <StackLayout orientation="horizontal" marginTop="12">
-            <Button text="ok" (tap)="close('OK')"></Button>
-            <Button text="cancel" (tap)="close('Cancel')"></Button>
-        </StackLayout>
-    </StackLayout>
-    `
-})
-export class ModalContent {
-    public prompt: string;
-    constructor(private params: ModalDialogParams) {
-        console.log("ModalContent.constructor: " + JSON.stringify(params))
-        this.prompt = params.context.promptMsg;
-    }
-
-    public close(res: string) {
-        this.params.closeCallback(res);
-    }
-
-    ngOnInit() {
-        console.log("ModalContent.ngOnInit");
-
-    }
-
-    ngOnDestroy() {
-        console.log("ModalContent.ngOnDestroy");
-    }
-}
+import {ModalDialogService, ModalDialogOptions, ModalDialogHost} from "../../nativescript-angular/directives/dialogs";
+import {ModalContent} from "./modal-content";
 
 @Component({
     selector: 'modal-test',
-    directives: [],
+    directives: [ModalDialogHost],
     providers: [ModalDialogService],
     template: `
-    <GridLayout rows="*, auto">
+    <GridLayout rows="*, auto" modal-dialog-host>
         <StackLayout verticalAlignment="top" margin="12">
             <Button text="show component" (tap)="showModal(false)"></Button>
             <Button text="show component fullscreen" (tap)="showModal(true)"></Button>
@@ -62,19 +28,16 @@ export class ModalContent {
 export class ModalTest {
     public result: string = "result";
 
-    constructor(
-        private elementRef: ElementRef,
-        private modal: ModalDialogService) {
-    }
-
-    public dialog() {
-        dialogs.alert({ title: "alert title", message: "alert message", okButtonText: "KO, NE!" });
+    constructor(private modal: ModalDialogService) {
     }
 
     public showModal(fullscreen: boolean) {
-        var options = new ModalDialogOptions({ promptMsg: "This is the prompt message!" }, fullscreen);
+        var options: ModalDialogOptions = {
+            context: { promptMsg: "This is the prompt message!" },
+            fullscreen: fullscreen
+        };
 
-        this.modal.showModal(ModalContent, this.elementRef, options).then((res: string) => {
+        this.modal.showModal(ModalContent, options).then((res: string) => {
             this.result = res || "empty result";
         })
     }

src/nativescript-angular/common/detached-loader.ts

@@ -1,15 +1,12 @@
 import {DynamicComponentLoader, ComponentRef, ElementRef, Component, Type} from 'angular2/core';
 
 /**
- * Page shim used for loading compnenets when navigating
+ * Wrapper component used for loading compnenets when navigating
+ * It uses DetachedContainer as selector so that it is elementRef is not attached to the visual tree.
  */
 @Component({
-    selector: 'nativescript-page-shim',
-    template: `
-        <DetachedContainer>
-            <Placeholder #loader></Placeholder>
-        </DetachedContainer>
-        `
+    selector: 'DetachedContainer', 
+    template: `<Placeholder #loader></Placeholder>`
 })
 export class DetachedLoader {
     constructor(

src/nativescript-angular/services/dialogs.ts renamed to src/nativescript-angular/directives/dialogs.ts

@@ -1,13 +1,11 @@
-import {DynamicComponentLoader, ElementRef, Injector, provide, Type, Injectable, ComponentRef} from 'angular2/core';
+import {DynamicComponentLoader, ElementRef, Injector, provide, Type, Injectable, ComponentRef, Directive} from 'angular2/core';
 import {Page} from 'ui/page';
 import {View} from 'ui/core/view';
 import {DetachedLoader} from '../common/detached-loader';
 
-export class ModalDialogOptions {
-    constructor(
-        public context: any = {},
-        public fullscreen: boolean = true) {
-    }
+export interface ModalDialogOptions {
+    context?: any;
+    fullscreen?: boolean;
 }
 
 export class ModalDialogParams {
@@ -19,12 +17,21 @@ export class ModalDialogParams {
 
 @Injectable()
 export class ModalDialogService {
+    private elementRef: ElementRef;
+
     constructor(
         private page: Page,
         private loader: DynamicComponentLoader) {
     }
 
-    public showModal(type: Type, elementRef: ElementRef, options: ModalDialogOptions): Promise<any> {
+    public registerElementRef(ref: ElementRef) {
+        this.elementRef = ref;
+    }
+
+    public showModal(type: Type, options: ModalDialogOptions): Promise<any> {
+        if (!this.elementRef) {
+            throw new Error("No elementRef: Make sure you have the modal-dialog-host directive inside your component.");
+        }
         return new Promise((resove, reject) => {
             const page = new Page();
 
@@ -40,8 +47,8 @@ export class ModalDialogService {
                 provide(Page, { useValue: page }),
                 provide(ModalDialogParams, { useValue: modalParams }),
             ]);
-            
-            this.loader.loadNextToLocation(DetachedLoader, elementRef, providers)
+
+            this.loader.loadNextToLocation(DetachedLoader, this.elementRef, providers)
                 .then((loaderRef) => {
                     detachedLoaderRef = loaderRef;
                     return (<DetachedLoader>loaderRef.instance).loadComponent(type)
@@ -57,4 +64,14 @@ export class ModalDialogService {
                 });
         })
     }
-}
+}
+
+
+@Directive({
+    selector: "[modal-dialog-host]"
+})
+export class ModalDialogHost {
+    constructor(elementRef: ElementRef, modalService: ModalDialogService) {
+        modalService.registerElementRef(elementRef);
+    }
+} 

src/nativescript-angular/view-util.ts

@@ -117,7 +117,6 @@ export function createText(value: string): NgView {
 }
 
 export function createViewContainer(name: string, parentElement: NgView, beforeAttach: BeforeAttachAction) {
-    //HACK: Using a ContentView here, so that it creates a native View object
     traceLog('Creating view container in:' + parentElement);
 
     const layout = createView('ProxyViewContainer', parentElement, beforeAttach);