feat(upgrade): support bindToController with binding definitions

Since angular 1.4 we can also pass controller bindings directly to bindToController, making this syntax more convenient Closes #4784
angular · Feb 2, 2016 · 99e6500 · 99e6500
1 parent 5c782d6
commit 99e6500
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/modules/angular2/src/upgrade/upgrade_ng1_adapter.ts b/modules/angular2/src/upgrade/upgrade_ng1_adapter.ts
@@ -78,11 +78,18 @@ export class UpgradeNg1ComponentAdapterBuilder {
   }
 
   extractBindings() {
-    var scope = this.directive.scope;
-    if (typeof scope == 'object') {
-      for (var name in scope) {
-        if ((<any>scope).hasOwnProperty(name)) {
-          var localName = scope[name];
+    var btcIsObject = typeof this.directive.bindToController === 'object';
+    if (btcIsObject && Object.keys(this.directive.scope).length) {
+      throw new Error(
+          `Binding definitions on scope and controller at the same time are not supported.`);
+    }
+
+    var context = (btcIsObject) ? this.directive.bindToController : this.directive.scope;
+
+    if (typeof context == 'object') {
+      for (var name in context) {
+        if ((<any>context).hasOwnProperty(name)) {
+          var localName = context[name];
           var type = localName.charAt(0);
           localName = localName.substr(1) || name;
           var outputName = 'output_' + name;
@@ -109,7 +116,7 @@ export class UpgradeNg1ComponentAdapterBuilder {
               this.propertyMap[outputName] = localName;
               break;
             default:
-              var json = JSON.stringify(scope);
+              var json = JSON.stringify(context);
               throw new Error(
                   `Unexpected mapping '${type}' in '${json}' in '${this.name}' directive.`);
           }

diff --git a/modules/angular2/test/upgrade/upgrade_spec.ts b/modules/angular2/test/upgrade/upgrade_spec.ts
@@ -417,6 +417,35 @@ export function main() {
                });
          }));
 
+      it('should support bindToController with bindings', inject([AsyncTestCompleter], (async) => {
+           var adapter = new UpgradeAdapter();
+           var ng1Module = angular.module('ng1', []);
+
+           var ng1 = function() {
+             return {
+               scope: {},
+               bindToController: {title: '@'},
+               template: '{{ctl.title}}',
+               controllerAs: 'ctl',
+               controller: Class({constructor: function() {}})
+             };
+           };
+           ng1Module.directive('ng1', ng1);
+           var Ng2 = Component({
+                       selector: 'ng2',
+                       template: '<ng1 title="WORKS"></ng1>',
+                       directives: [adapter.upgradeNg1Component('ng1')]
+                     }).Class({constructor: function() {}});
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+           var element = html(`<div><ng2></ng2></div>`);
+           adapter.bootstrap(element, ['ng1'])
+               .ready((ref) => {
+                 expect(multiTrim(document.body.textContent)).toEqual('WORKS');
+                 ref.dispose();
+                 async.done();
+               });
+         }));
+
       it('should support single require in linking fn', inject([AsyncTestCompleter], (async) => {
            var adapter = new UpgradeAdapter();
            var ng1Module = angular.module('ng1', []);