feat(core): made directives shadow native element properties

BREAKING CHANGE
    Previously, if an element had a property, Angular would update that property even if there was a directive placed on the same element with the same property. Now, the directive would have to explicitly update the native elmement by either using hostProperties or the renderer.

modules/angular2/src/render/dom/view/proto_view_builder.ts

@@ -330,20 +330,27 @@ const STYLE_PREFIX = 'style';
 
 function buildElementPropertyBindings(
     schemaRegistry: ElementSchemaRegistry, protoElement: /*element*/ any, isNgComponent: boolean,
-    bindingsInTemplate: Map<string, ASTWithSource>, directiveTempaltePropertyNames: Set<string>):
+    bindingsInTemplate: Map<string, ASTWithSource>, directiveTemplatePropertyNames: Set<string>):
     List<api.ElementPropertyBinding> {
   var propertyBindings = [];
+
   MapWrapper.forEach(bindingsInTemplate, (ast, propertyNameInTemplate) => {
     var propertyBinding = createElementPropertyBinding(schemaRegistry, ast, propertyNameInTemplate);
-    if (isValidElementPropertyBinding(schemaRegistry, protoElement, isNgComponent,
+
-                                      propertyBinding)) {
+    if (isPresent(directiveTemplatePropertyNames) &&
+        SetWrapper.has(directiveTemplatePropertyNames, propertyNameInTemplate)) {
+      // We do nothing because directives shadow native elements properties.
+
+    } else if (isValidElementPropertyBinding(schemaRegistry, protoElement, isNgComponent,
+                                             propertyBinding)) {
       propertyBindings.push(propertyBinding);
-    } else if (!isPresent(directiveTempaltePropertyNames) ||
+
-               !SetWrapper.has(directiveTempaltePropertyNames, propertyNameInTemplate)) {
+    } else {
-      // directiveTempaltePropertyNames is null for host property bindings
       var exMsg =
           `Can't bind to '${propertyNameInTemplate}' since it isn't a known property of the '<${DOM.tagName(protoElement).toLowerCase()}>' element`;
-      if (isPresent(directiveTempaltePropertyNames)) {
+
+      // directiveTemplatePropertyNames is null for host property bindings
+      if (isPresent(directiveTemplatePropertyNames)) {
         exMsg += ' and there are no matching directives with a corresponding property';
       }
       throw new BaseException(exMsg);

modules/angular2/test/core/compiler/integration_spec.ts

@@ -31,6 +31,7 @@ import {
   isJsObject,
   global,
   stringify,
+  isBlank,
   CONST,
   CONST_EXPR
 } from 'angular2/src/facade/lang';
@@ -1359,8 +1360,8 @@ export function main() {
                     });
               }));
 
-    if (!IS_DARTIUM) {
+    describe('Property bindings', () => {
-      describe('Missing property bindings', () => {
+      if (!IS_DARTIUM) {
         it('should throw on bindings to unknown properties',
            inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
                                                                async) => {
@@ -1386,8 +1387,47 @@ export function main() {
                  .createAsync(MyComp)
                  .then((val) => { async.done(); });
            }));
-      });
+      }
-    }
+
+      it('should not be created when there is a directive with the same property',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<span [title]="ctxProp"></span>',
+                directives: [DirectiveWithTitle]
+              }))
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.componentInstance.ctxProp = "TITLE";
+                 rootTC.detectChanges();
+
+                 var el = DOM.querySelector(rootTC.nativeElement, "span");
+                 expect(isBlank(el.title) || el.title == '').toBeTruthy();
+
+                 async.done();
+
+               });
+         }));
+
+      it('should work when a directive uses hostProperty to update the DOM element',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<span [title]="ctxProp"></span>',
+                directives: [DirectiveWithTitleAndHostProperty]
+              }))
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.componentInstance.ctxProp = "TITLE";
+                 rootTC.detectChanges();
+
+                 var el = DOM.querySelector(rootTC.nativeElement, "span");
+                 expect(el.title).toEqual("TITLE");
+
+                 async.done();
+
+               });
+         }));
+    });
+
 
     describe('different proto view storages', () => {
       function runWithMode(mode: string) {
@@ -1505,6 +1545,16 @@ class MyDir {
   constructor() { this.dirProp = ''; }
 }
 
+@Directive({selector: '[title]', properties: ['title']})
+class DirectiveWithTitle {
+  title: string;
+}
+
+@Directive({selector: '[title]', properties: ['title'], host: {'[title]': 'title'}})
+class DirectiveWithTitleAndHostProperty {
+  title: string;
+}
+
 @Component({selector: 'push-cmp', properties: ['prop'], changeDetection: ON_PUSH})
 @View({template: '{{field}}'})
 @Injectable()

modules/angular2/test/render/dom/view/proto_view_builder_spec.ts

@@ -104,42 +104,53 @@ export function main() {
         var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
         expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('readOnly');
       });
-
     });
 
-    describe('property binding types', () => {
+    describe('property binding', () => {
-      it('should detect property names', () => {
+      describe('types', () => {
-        builder.bindElement(el('<div/>')).bindProperty('tabindex', emptyExpr());
+        it('should detect property names', () => {
-        var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
+          builder.bindElement(el('<div/>')).bindProperty('tabindex', emptyExpr());
-        expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.PROPERTY);
+          var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
+          expect(pv.elementBinders[0].propertyBindings[0].type)
+              .toEqual(PropertyBindingType.PROPERTY);
+        });
+
+        it('should detect attribute names', () => {
+          builder.bindElement(el('<div/>')).bindProperty('attr.someName', emptyExpr());
+          var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
+          expect(pv.elementBinders[0].propertyBindings[0].type)
+              .toEqual(PropertyBindingType.ATTRIBUTE);
+        });
+
+        it('should detect class names', () => {
+          builder.bindElement(el('<div/>')).bindProperty('class.someName', emptyExpr());
+          var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
+          expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.CLASS);
+        });
+
+        it('should detect style names', () => {
+          builder.bindElement(el('<div/>')).bindProperty('style.someName', emptyExpr());
+          var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
+          expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.STYLE);
+        });
+
+        it('should detect style units', () => {
+          builder.bindElement(el('<div/>')).bindProperty('style.someName.someUnit', emptyExpr());
+          var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
+          expect(pv.elementBinders[0].propertyBindings[0].unit).toEqual('someUnit');
+        });
       });
 
-      it('should detect attribute names', () => {
+      it('should not create a property binding when there is already same directive property binding',
-        builder.bindElement(el('<div/>')).bindProperty('attr.someName', emptyExpr());
+         () => {
-        var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
+           var binder = builder.bindElement(el('<div/>'));
-        expect(pv.elementBinders[0].propertyBindings[0].type)
-            .toEqual(PropertyBindingType.ATTRIBUTE);
-      });
 
-      it('should detect class names', () => {
+           binder.bindProperty('tabindex', emptyExpr());
-        builder.bindElement(el('<div/>')).bindProperty('class.someName', emptyExpr());
+           binder.bindDirective(0).bindProperty('tabindex', emptyExpr(), 'tabindex');
-        var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
-        expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.CLASS);
-      });
 
-      it('should detect style names', () => {
+           var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
-        builder.bindElement(el('<div/>')).bindProperty('style.someName', emptyExpr());
+           expect(pv.elementBinders[0].propertyBindings.length).toEqual(0);
-        var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
+         });
-        expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.STYLE);
-      });
-
-      it('should detect style units', () => {
-        builder.bindElement(el('<div/>')).bindProperty('style.someName.someUnit', emptyExpr());
-        var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
-        expect(pv.elementBinders[0].propertyBindings[0].unit).toEqual('someUnit');
-      });
     });
-
-
   });
 }