fix(renderer): support namespaced attributes

nativescript-angular/renderer.ts

@@ -151,9 +151,9 @@ export class NativeScriptRenderer extends Renderer2 {
         // TODO: handle this when we resolve routing and navigation.
     }
 
-    setAttribute(view: NgView, name: string, value: string) {
-        traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}`);
-        return this.setProperty(view, name, value);
+    setAttribute(view: NgView, name: string, value: string, namespace?: string) {
+        traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}, namespace: ${namespace}`);
+        return this.viewUtil.setProperty(view, name, value, namespace);
     }
 
     removeAttribute(_el: NgView, _name: string): void {
@@ -162,7 +162,7 @@ export class NativeScriptRenderer extends Renderer2 {
 
     setProperty(view: any, name: string, value: any) {
         traceLog(`NativeScriptRenderer.setProperty ${view} : ${name} = ${value}`);
-        this.viewUtil.setProperty(view, name, value);
+        return this.viewUtil.setProperty(view, name, value);
     }
 
     addClass(view: NgView, name: string): void {

nativescript-angular/view-util.ts

@@ -16,8 +16,6 @@ import { ValueSource } from "ui/core/dependency-observable";
 import { platformNames, Device } from "platform";
 import { rendererLog as traceLog, styleError } from "./trace";
 
-const IOS_PREFX: string = "ios-";
-const ANDROID_PREFX: string = "android-";
 const XML_ATTRIBUTES = Object.freeze(["style", "rows", "columns", "fontAttributes"]);
 const whiteSpaceSplitter = /\s+/;
 
@@ -149,30 +147,8 @@ export class ViewUtil {
         return view;
     }
 
-    private platformFilter(attribute: string): string {
-        let lowered = attribute.toLowerCase();
-        if (lowered.indexOf(IOS_PREFX) === 0) {
-            if (this.isIos) {
-                return attribute.substr(IOS_PREFX.length);
-            } else {
-                return null;
-            }
-        }
-
-        if (lowered.indexOf(ANDROID_PREFX) === 0) {
-            if (this.isAndroid) {
-                return attribute.substr(ANDROID_PREFX.length);
-            } else {
-                return null;
-            }
-        }
-
-        return attribute;
-    }
-
-    public setProperty(view: NgView, attributeName: string, value: any): void {
-        attributeName = this.platformFilter(attributeName);
-        if (!attributeName) {
+    public setProperty(view: NgView, attributeName: string, value: any, namespace?: string): void {
+        if (namespace && !this.runsIn(namespace)) {
             return;
         }
 
@@ -223,6 +199,12 @@ export class ViewUtil {
         return found ? index : -1;
     }
 
+    private runsIn(platform: string): boolean {
+        return (platform === "ios" && this.isIos) ||
+            (platform === "android" && this.isAndroid);
+    }
+
+
     private setPropertyInternal(view: NgView, attributeName: string, value: any): void {
         traceLog("Setting attribute: " + attributeName);
 
@@ -354,3 +336,4 @@ export class ViewUtil {
         }
     }
 }
+

tests/app/tests/platform-filter-components.ts

@@ -29,7 +29,7 @@ export class AndroidSpecificComponent {
 @Component({
     template: `
     <StackLayout>
-        <Label android-text="ANDROID" ios-text="IOS"></Label>
+        <Label android:text="ANDROID" ios:text="IOS"></Label>
     </StackLayout>`
 })
 export class PlatformSpecificAttributeComponent {

tests/app/tests/property-sets.ts

@@ -87,28 +87,28 @@ describe("setting View properties", () => {
     it("sets ios property in ios", () => {
         let view = new TestView();
         let testUtil = new ViewUtil(iosDevice);
-        testUtil.setProperty(view, "ios-anyValue", "blah");
+        testUtil.setProperty(view, "anyValue", "blah", "ios");
         assert.strictEqual("blah", view.anyValue);
     });
 
     it("doesn\'t set android property in ios", () => {
         let view = new TestView();
         let testUtil = new ViewUtil(iosDevice);
-        testUtil.setProperty(view, "android-anyValue", "blah");
+        testUtil.setProperty(view, "anyValue", "blah", "android");
         assert.isUndefined(view.anyValue);
     });
 
     it("sets android property in android", () => {
         let view = new TestView();
         let testUtil = new ViewUtil(androidDevice);
-        testUtil.setProperty(view, "android-anyValue", "blah");
+        testUtil.setProperty(view, "anyValue", "blah", "android");
         assert.strictEqual("blah", view.anyValue);
     });
 
     it("doesn\'t set ios property in android", () => {
         let view = new TestView();
         let testUtil = new ViewUtil(androidDevice);
-        testUtil.setProperty(view, "ios-anyValue", "blah");
+        testUtil.setProperty(view, "anyValue", "blah", "ios");
         assert.isUndefined(view.anyValue);
     });
 });