Behaviour bindToController in child scope versus isolated scope

[jwgmeligmeyling]

I was playing around with the bindToController option for directives. I stumbled upon a seemingly strange difference between the behaviour using a child scope compared to an isolated scope. When I use an isolated scope, an new scope is created for the directive, but changes to the bound controller attributes are forwarded to the parent scope. Yet when I use a child scope instead, my example breaks. (Using bindToController using child scopes should be allowed according to http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html#improvements-in-14 )

The code:

    {
        restrict: 'E',
        scope: {},
        controller: 'FooDirCtrl',
        controllerAs: 'vm',
        bindToController: {
            name: '='
        },
        template: '<div><input ng-model="vm.name"></div>'
    };

Working demo https://jsfiddle.net/tthtznn2/

The version using a child scope:

    {
        restrict: 'E',
        scope: true,
        controller: 'FooDirCtrl',
        controllerAs: 'vm',
        bindToController: {
            name: '='
        },
        template: '<div><input ng-model="vm.name"></div>'
    };

Demo: http://jsfiddle.net/ydLd1e00/

The changes to name are forwarded to the child scope, but not to the parent scope. This in contrast to binding to an isolated scope, where the changes are forwarded to the old scope. Why is this?

*As copied from http://stackoverflow.com/questions/32972354/behaviour-bindtocontroller-in-child-scope-versus-isolated-scope *

[gkalpak]

I believe this is a valid bug. When using bindToController = {...} with scope: true, we are evaluating the directive's bindings against the new (child) scope, instead of the parent scope.
(I think it's an oversight, because of the "post-mortem" backporting of bindToController to non-isolate scopes - it was a bug we've been getting away with, because of JS's prototypal inheritance, but it makes itself felt when using properties with the same name on both scopes (e.g. controller aliases).)

Working on a fix (I think)...

BTW, here is a failing testcase:

it('should evaluate against the correct scope, when using `bindToController` (new scope)',
  function() {
    module(function($compileProvider, $controllerProvider) {
      $controllerProvider.register({
        'ParentCtrl': function() { this.value = 'parent'; },
        'ChildCtrl': function() { this.value = 'child'; }
      });

      $compileProvider.directive('child', valueFn({
        scope: true,
        controller: 'ChildCtrl',
        controllerAs: 'ctrl',
        bindToController: {
          value2: '='
        },
        template: '{{ ctrl.value2 }}'
      }));
    });

    inject(function($compile, $rootScope) {
      element = $compile(
          '<div ng-controller="ParentCtrl as ctrl">' +
            '<child value2="ctrl.value"></child>' +
          '</div>')($rootScope);
      $rootScope.$digest();

      expect(element.text()).toBe('parent');
    });
  }
);

[jwgmeligmeyling]

👍