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

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

本文关键字：指令 属性 继承 控制器 语法      更新时间：2023-09-26

我想在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>'
    }
  });

您必须将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;
        }
    }
});

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

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']);
相关文章：