親ディレクティブのコントローラをディレクティブコントローラに渡します（ "link"関数のように）

Question

私はいくつかの階層的なディレクティブを持っていますが、コントローラ内にいくつかの関数を持たなければなりません。それ。しかし、この1つのディレクティブは親ディレクティブのコントローラーも参照する必要がありますが、コントローラーでこれを行う方法はわかりません（リンク（）の中でどのように知っていますか？

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

が、コントローラがある、またはそれはOK、それの後にリンク機能が実行されているので、それは、奇妙なようだ：スコープでそれを行うことが可能なはず？私は混乱しているし、それは悪いデザインかもしれないと思う？

図：

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方法を使用することができます。

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(); 
 
    } 
 
    }; 
 
});

<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>