使用控制器作为语法时，如何从父指令继承属性？

Question

I want to use the Controller As syntax in my Angular directives for two reasons. It's more plain JS and there's no dependency on the $scope service which will not be available in Angular 2.0.

It works great for a single directive but I cannot figure out how to print a property from the controller of a parent directive in a child directive.

function parentCtrl () {
  this.greeting = { hello: 'world' };
}

function childCtrl () {}


angular.module('app', [])
  .controller('parentCtrl', parentCtrl)
  .controller('childCtrl', childCtrl)
  .directive('myParent', function () {
    return {
      scope: {},
      bindToController: true,
      controller: 'parentCtrl',
      controllerAs: 'parent',
      template: '<my-child></my-child>'
    }
  })
  .directive('myChild', function () {
    return {
      scope: {
        greeting: '='
      },
      bindToController: true,
      controller: 'childCtrl',
      controllerAs: 'child',
      template: '<p>{{ greeting.hello }}</p>'
    }
  });

Answer 1

You have to require the parent controller, the use the link function to inject the parent to the child. The myChild directive would become:

.directive('myChild', function () {
    return {
        scope: {
            // greeting: '=' // NO NEED FOR THIS; USED FROM PARENT
        },
        bindToController: true, // UNNECESSARY HERE, THERE ARE NO SCOPE PROPS
        controller: 'childCtrl',
        controllerAs: 'child',
        template: '<p>{{ child.greeting.hello }}</p>', // PREFIX WITH VALUE
                                                       // OF `controllerAs`
        require: ['myChild', '^myParent'],
        link: function(scope, elem, attrs, ctrls) {
            var myChild = ctrls[0], myParent = ctrls[1];
            myChild.greeting = myParent.greeting;
        }
    }
});

Answer 2

I found that you can use element attributes to pass properties from the parent directive controller's scope to a child.

function parentCtrl () {
  this.greeting = 'Hello world!';
}

function myParentDirective () {
  return {
    scope: {},
    controller: 'parentCtrl',
    controllerAs: 'ctrl',
    template: '<my-child greeting="ctrl.greeting"></my-child>'
  }
}

function childCtrl () {}

function myChildDirective () {
  return {
    scope: {
      greeting: '='
    },
    bindToController: true,
    controller: 'childCtrl',
    controllerAs: 'ctrl',
    template: '<p>{{ ctrl.greeting }}</p><input ng-model="ctrl.greeting" />'
  }
}

angular.module('parent', [])
  .controller('parentCtrl', parentCtrl)
  .directive('myParent', myParentDirective);

angular.module('child', [])
  .controller('childCtrl', childCtrl)
  .directive('myChild', myChildDirective);

angular.module('app', ['parent', 'child']);