Question

我有几个分层指令，在一个中，我需要在其控制器中有一些函数，以便子元素可以与它交互。但是这个指令也需要引用它的父指令控制器，但是我不知道如何在控制器中做到这一点（我知道如何在＆＃34; link（）＆＃34;但是这个时间我需要控制器进行儿童互动）。应该可以使用范围来实现：

controller: function($scope){},
link: function (scope, ..., parentCtrl){
    scope.parentCtrl = parentCtrl;
}

但这看起来很奇怪，因为链接功能在控制器执行后执行，或者它可以吗？我很困惑，我认为这可能是一个糟糕的设计？

图：

ParentParentDirective
    controller: function(service){
        this.service = service;
    }

ParentDirective
    controller: function(){
        this.callOnService = function(id){
            ???ParentParentDirective???.service.callSth(id);
        }
    }

ChildDirective
    link(scope, ...,ParentDirectiveCtrl){
        scope.makeChanges = ParentDirectiveCtrl.callOnService;
    }

Answer 1

您可以使用$ element.controller方法，如下例所示。

＆＃13;

angular.module('app', []);

angular.module('app').directive('grandparent', function () {
  return {
    restrict: 'E',
    controller: function () {
      this.go = function () {
        console.log('Grandparent directive');
      };
    }
  };
});


angular.module('app').directive('parent', function () {
  return {
    restrict: 'E',
    controller: function () {
      this.go = function () {
        console.log('Parent directive');
      };
    }
  };
});

angular.module('app').directive('child', function () {
  return {
    restrict: 'E',
    require: ['^parent', '^grandparent'],
    controller: function ($element) {
      var parentCtrl = $element.controller('parent');
      var grandparentCtrl = $element.controller('grandparent');
      
      parentCtrl.go();
      grandparentCtrl.go();
    }
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="app">
  <grandparent>
    <parent>
      <child></child>
    </parent>
  </grandparent>
</div>

＆＃13;

将父指令的控制器传递给指令控制器（就像它在＆＃34; link＆＃34;函数中完成的那样）

1 个答案: