fix: flip attr / property bind in directives annotations

Fixes #648

Closes #684

modules/angular2/docs/core/02_directives.md

@@ -68,7 +68,7 @@ Here is a trivial example of a tooltip decorator. The directive will log a toolt
 @Decorator({
   selector: '[tooltip]', // CSS Selector which triggers the decorator
   bind: {                // List which properties need to be bound
-    tooltip: 'text'      //  - DOM element tooltip property should be 
+    text: 'tooltip'      //  - DOM element tooltip property should be 
   },                     //    mapped to the directive text property.
   event: {               // List which events need to be mapped.
     mouseover: 'show'    //  - Invoke the show() method every time 
@@ -180,7 +180,7 @@ Viewport is a directive which can control instantiation of child views which are
 @Viewport({
   selector: '[if]',
   bind: {
-    'if': 'condition'
+    'condition': 'if'
   }
 })
 export class If {

modules/angular2/src/core/compiler/pipeline/element_binder_builder.js

@@ -196,7 +196,7 @@ export class ElementBinderBuilder extends CompileStep {
       var annotation = directive.annotation;
       if (isBlank(annotation.bind)) continue;
       var _this = this;
-      StringMapWrapper.forEach(annotation.bind, function (dirProp, elProp) {
+      StringMapWrapper.forEach(annotation.bind, function (elProp, dirProp) {
         var expression = isPresent(compileElement.propertyBindings) ?
           MapWrapper.get(compileElement.propertyBindings, elProp) :
             null;

modules/angular2/src/directives/foreach.js

@@ -7,7 +7,7 @@ import {ListWrapper} from 'angular2/src/facade/collection';
 @Viewport({
   selector: '[foreach][in]',
   bind: {
-    'in': 'iterableChanges[]'
+    'iterableChanges[]': 'in'
   }
 })
 export class Foreach  {

modules/angular2/src/directives/if.js

@@ -5,7 +5,7 @@ import {isBlank} from 'angular2/src/facade/lang';
 @Viewport({
   selector: '[if]',
   bind: {
-    'if': 'condition'
+    'condition': 'if'
   }
 })
 export class If {

modules/angular2/src/directives/switch.js

@@ -33,7 +33,7 @@ import {Parent} from 'angular2/src/core/annotations/visibility';
 @Decorator({
   selector: '[switch]',
   bind: {
-    'switch': 'value'
+    'value': 'switch'
   }
 })
 export class Switch {
@@ -144,7 +144,7 @@ export class Switch {
 @Viewport({
   selector: '[switch-when]',
   bind: {
-    'switch-when' : 'when'
+    'when' : 'switch-when'
   }
 })
 export class SwitchWhen {

modules/angular2/src/forms/directives.js

@@ -99,7 +99,7 @@ export class ControlDirectiveBase {
   lifecycle: [onChange],
   selector: '[control-name]',
   bind: {
-    'control-name' : 'controlName',
+    'controlName' : 'control-name',
     'type' : 'type'
   }
 })
@@ -117,7 +117,7 @@ export class ControlNameDirective extends ControlDirectiveBase {
   lifecycle: [onChange],
   selector: '[control]',
   bind: {
-    'control' : 'controlName',
+    'controlName' : 'control',
     'type' : 'type'
   }
 })
@@ -134,7 +134,7 @@ export class ControlDirective extends ControlDirectiveBase {
 @Decorator({
   selector: '[control-group]',
   bind: {
-    'control-group' : 'controlGroup'
+    'controlGroup' : 'control-group'
   }
 })
 export class ControlGroupDirective extends ControlGroupDirectiveBase {
@@ -163,7 +163,7 @@ export class ControlGroupDirective extends ControlGroupDirectiveBase {
 @Component({
   selector: '[new-control-group]',
   bind: {
-    'new-control-group' : 'initData'
+    'initData' : 'new-control-group'
   }
 })
 @Template({inline: '<content>'})

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

@@ -288,7 +288,7 @@ export function main() {
 
 @Decorator({
   selector: '[my-dir]',
-  bind: {'elprop':'dirProp'}
+  bind: {'dirProp':'elprop'}
 })
 class MyDir {
   dirProp:string;

modules/angular2/test/core/compiler/pipeline/element_binder_builder_spec.js

@@ -448,7 +448,7 @@ class SomeDecoratorDirective {
 }
 
 @Decorator({
-  bind: {'boundprop1': 'decorProp'}
+  bind: {'decorProp': 'boundprop1'}
 })
 class SomeDecoratorDirectiveWithBinding {
   decorProp;
@@ -461,8 +461,8 @@ class SomeDecoratorDirectiveWithBinding {
 
 @Decorator({
   bind: {
-    'boundprop1': 'decorProp',
-    'boundprop2': 'decorProp2'
+    'decorProp': 'boundprop1',
+    'decorProp2': 'boundprop2'
   }
 })
 class SomeDecoratorDirectiveWith2Bindings {
@@ -479,7 +479,7 @@ class SomeViewportDirective {
 }
 
 @Viewport({
-  bind: {'boundprop2': 'templProp'}
+  bind: {'templProp': 'boundprop2'}
 })
 class SomeViewportDirectiveWithBinding {
   templProp;
@@ -492,7 +492,7 @@ class SomeViewportDirectiveWithBinding {
 class SomeComponentDirective {
 }
 
-@Component({bind: {'boundprop3': 'compProp'}})
+@Component({bind: {'compProp': 'boundprop3'}})
 class SomeComponentDirectiveWithBinding {
   compProp;
   constructor() {

modules/benchmarks/src/compiler/compiler_benchmark.js

@@ -28,31 +28,31 @@ function setupReflector() {
   reflector.registerType(Dir0, {
     "factory": () => new Dir0(),
     "parameters": [],
-    "annotations" : [new Decorator({selector: '[dir0]', bind: {'attr0': 'prop'}})]
+    "annotations" : [new Decorator({selector: '[dir0]', bind: {'prop': 'attr0'}})]
   });
 
   reflector.registerType(Dir1, {
     "factory": (dir0) => new Dir1(dir0),
     "parameters": [[Dir0]],
-    "annotations" : [new Decorator({selector: '[dir1]', bind: {'attr1': 'prop'}})]
+    "annotations" : [new Decorator({selector: '[dir1]', bind: {'prop': 'attr1'}})]
   });
 
   reflector.registerType(Dir2, {
     "factory": (dir1) => new Dir2(dir1),
     "parameters": [[Dir1]],
-    "annotations" : [new Decorator({selector: '[dir2]', bind: {'attr2': 'prop'}})]
+    "annotations" : [new Decorator({selector: '[dir2]', bind: {'prop': 'attr2'}})]
   });
 
   reflector.registerType(Dir3, {
     "factory": (dir2) => new Dir3(dir2),
     "parameters": [[Dir2]],
-    "annotations" : [new Decorator({selector: '[dir3]', bind: {'attr3': 'prop'}})]
+    "annotations" : [new Decorator({selector: '[dir3]', bind: {'prop': 'attr3'}})]
   });
 
   reflector.registerType(Dir4, {
     "factory": (dir3) => new Dir4(dir3),
     "parameters": [[Dir3]],
-    "annotations" : [new Decorator({selector: '[dir4]', bind: {'attr4': 'prop'}})]
+    "annotations" : [new Decorator({selector: '[dir4]', bind: {'prop': 'attr4'}})]
   });
 
   reflector.registerGetters({
@@ -117,7 +117,7 @@ function createTemplateHtml(templateId, repeatCount) {
 @Decorator({
   selector: '[dir0]',
   bind: {
-    'attr0': 'prop'
+    'prop': 'attr0'
   }
 })
 class Dir0 {}
@@ -125,7 +125,7 @@ class Dir0 {}
 @Decorator({
   selector: '[dir1]',
   bind: {
-    'attr1': 'prop'
+    'prop': 'attr1'
   }
 })
 class Dir1 {
@@ -135,7 +135,7 @@ class Dir1 {
 @Decorator({
   selector: '[dir2]',
   bind: {
-    'attr2': 'prop'
+    'prop': 'attr2'
   }
 })
 class Dir2 {
@@ -145,7 +145,7 @@ class Dir2 {
 @Decorator({
   selector: '[dir3]',
   bind: {
-    'attr3': 'prop'
+    'prop': 'attr3'
   }
 })
 class Dir3 {
@@ -155,7 +155,7 @@ class Dir3 {
 @Decorator({
   selector: '[dir4]',
   bind: {
-    'attr4': 'prop'
+    'prop': 'attr4'
   }
 })
 class Dir4 {

modules/benchmarks/src/naive_infinite_scroll/cells.js

@@ -104,7 +104,7 @@ export function setupReflectorForCells() {
       new Component({
         selector: 'company-name',
         bind: {
-          'cell-width': 'width',
+          'width': 'cell-width',
           'company': 'company'
         }
       }),
@@ -122,7 +122,7 @@ export function setupReflectorForCells() {
       new Component({
         selector: 'opportunity-name',
         bind: {
-          'cell-width': 'width',
+          'width': 'cell-width',
           'opportunity': 'opportunity'
         }
       }),
@@ -140,7 +140,7 @@ export function setupReflectorForCells() {
       new Component({
         selector: 'offering-name',
         bind: {
-          'cell-width': 'width',
+          'width': 'cell-width',
           'offering': 'offering'
         }
       }),
@@ -158,7 +158,7 @@ export function setupReflectorForCells() {
       new Component({
         selector: 'stage-buttons',
         bind: {
-          'cell-width': 'width',
+          'width': 'cell-width',
           'offering': 'offering'
         }
       }),
@@ -184,7 +184,7 @@ export function setupReflectorForCells() {
       new Component({
         selector: 'account-cell',
         bind: {
-          'cell-width': 'width',
+          'width': 'cell-width',
           'account': 'account'
         }
       }),
@@ -207,7 +207,7 @@ export function setupReflectorForCells() {
       new Component({
         selector: 'formatted-cell',
         bind: {
-          'cell-width': 'width',
+          'width': 'cell-width',
           'value': 'value'
         }
       }),

modules/benchmarks/src/naive_infinite_scroll/index.js

@@ -158,7 +158,7 @@ export function setupReflectorForAngular() {
     'annotations' : [new Viewport({
       selector: '[if]',
       bind: {
-        'if': 'condition'
+        'condition': 'if'
       }
     })]
   });
@@ -169,7 +169,7 @@ export function setupReflectorForAngular() {
     'annotations' : [new Viewport({
       selector: '[foreach]',
       bind: {
-        'in': 'iterableChanges[]'
+        'iterableChanges[]': 'in'
       }
     })]
   });

modules/benchmarks/src/tree/tree_benchmark.js

@@ -54,7 +54,7 @@ function setupReflector() {
     'annotations' : [new Viewport({
       selector: '[ng-if]',
       bind: {
-        'ng-if': 'ngIf'
+        'ngIf': 'ng-if'
       }
     })]
   });