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

Question

出于两个原因，我想在 Angular 指令中使用 Controller As 语法。它是更简单的 JS，并且不依赖于 Angular 2.0 中不可用的 $scope 服务。

它非常适合单个指令，但我不知道如何从子指令中的父指令的控制器打印属性。

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

您必须 require 父控制器，使用 link 函数将父控制器注入子控制器。 myChild 指令将变为：

.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

我发现您可以使用元素属性将属性从父指令控制器的范围传递给子级。

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']);

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

How do I inherit properties from parent directive when using the controller as syntax?

javascript

angularjs

angularjs-directive

angularjs-scope