angularjs - 需要嵌套在父指令 AngularJS 中的指令 Controller

Question

我想知道是否有一种方法可以要求存在/嵌套在 AngularJS 中作为公共(public)父级子指令的指令的 Controller 。

指令结构

假设我的指令具有以下结构:

<parent-directive>
    <ul>
        <li some-nested-directive ng-repeat="dir in directives"></li>
    </ul>
    <settings-menu></settings-menu>
</parent-directive>

指令定义

/* 
* some-nested-directive directive definition
*/
.directive('someNestedDirective', function(){
    // ...
    return {
       restrict: 'A',
       controller: someNestedDirectiveController
    };
});

/* 
* settings-menu directive definition
*/
.directive('settingsMenu', function(){
    return {
        restrict: 'AE',
        require: [], // how to require the nested-directive controller here?
        link: function(scope, iElement, attrs, ctrls){
            // ...
        }
    };
})

我已经 checkout this SO 问题说明如何要求层次结构中同一行存在的指令 Controller 。

但我的问题是关于一种在不一定存在于同一行的指令层次结构中执行相同操作的方法。如果这是不可能的，那么适当的解决方法是什么？任何帮助，将不胜感激。

编辑

此外，可以使用 require 的任何前缀(或它们的组合)来实现相同的目的吗？

Answer 1

一种方法是使用 parent 指令作为在 Controller 之间传递引用的方式:

var mod = angular.module('test', []);

mod.directive('parent', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div>Parent <div ng-transclude=""></div></div>',
    controller: function ParentCtrl() {}
  }
});

mod.directive('dirA', function() {
  return {
    restrict: 'E',
    template: '<div>Dir A <input type="text" ng-model="name"></div>',
    require: ['dirA', '^^parent'],
    link: function(scope, element, attrs, ctrls) {
      //here we store this directive controller into parent directive controller instance
      ctrls[1].dirA = ctrls[0];
    },
    controller: function DirACtrl($scope) {
      $scope.name = 'Dir A Name';
      this.name = function() {
        return $scope.name;
      };
    }
  }
});

mod.directive('dirB', function() {
  return {
    restrict: 'E',
    template: '<div>Dir A <button ng-click="click()">Click</button></div>',
    require: ['dirB', '^^parent'],
    link: function(scope, element, attrs, ctrls) {
      //let's assign parent controller instance to this directive controller instance
      ctrls[0].parent = ctrls[1];
    },
    controller: function DirBCtrl($scope) {
      var ctrl = this;
      $scope.click = function() {
        //access dirA controller through parent
        alert(ctrl.parent.dirA.name());
      };
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app='test'>
  <parent>
    <dir-a></dir-a>
    <dir-b></dir-b>
  </parent>
</div>

当使用上述方法时，封装 dirA Controller 如何存储在 parent Controller 中也是有意义的，即通过使用 a getter property或者仅公开 dirA Controller 所需的属性。