Angular JS - ネストされたカスタムディレクティブを持つControllerAsを使用する

Question

タイトルにはネストされたカスタムディレクティブを使用するAngularプロジェクトに関するいくつかの問題があります。私はユーザーがチェックボックスをクリックして検索結果のJSONフィードをフィルタリングできるようにするインターフェイスを作成しています。次のように ディレクティブテンプレート階層は次のとおりです。

<filtergroup> 
    <filter></filter> 
</filtergroup> 

私はフィルタグループのためにテンプレート内のフィルタグループディレクティブのコントローラで定義された変数にアクセスすることができるように見えます。しかし、私は以下

require: '^filtergroup' 

を使用しているにもかかわらず、子ディレクティブの中から同じ変数にアクセスすることはできません私のディレクティブです：

.directive('filtergroup', [function(){ 
return{ 
    restrict: 'E', 
    transclude: true, 
    scope: { }, 
    template: '<div><ng-transclude></ng-transclude>{{filtergroup.variable}}</div>', 
    bindToController: true, 
    controllerAs: 'filtergroup', 
    replace: true, 
    controller: function() { 
     var self = this; 
      self.variable = "blah"; 
    } 
};}]) 

.directive('filter', [function(){ 
return { 
    restrict: 'E', 
    template: '<div>{{filtergroup.variable}}</div>', 
    require: '^filtergroup', 
     scope: {}, 
    link: function(scope, elem, attr, filtergroupCtrl){ 
     scope.active = false; 
    } 
};}]); 

私もで、問題の単純化Code​​penを作成しました：

これは私が狂気運転しているよう

http://codepen.io/decodedcreative/pen/NrNqXm

すべてのヘルプは素晴らしいことです！ありがとう

Answer 1

require: '^filtergroup'と言うことによって、あなたはfiltergroupのコントローラをリンク機能に注入するよう求めているだけです。次に、それを使用する方法はあなた次第です。

お使いの場合には

、あなたはsの範囲「filterへの参照」filtergroupCtrlを追加することができます。

.directive('filter', [function(){ 
    return { 
     // ... 
     template: '<div>{{filtergroup.variable}}</div>', 
     link: function(scope, elem, attr, filtergroupCtrl){ 
      scope.filtergroup = filtergroupCtrl; 
      // ... 
     } 
    }; 
}]); 

あなたは子供のテンプレートであなたがしようとしている方法は、それをアクセスできるようになります。この道をそれを行うには：

<div>{{filtergroup.variable}}</div>