Angular JS - 중첩 된 사용자 지정 지시문이있는 ControllerAs 사용

Question

제목에서 알 수 있듯이 중첩 된 사용자 지정 지시문을 사용하는 Angular 프로젝트에 몇 가지 문제가 있습니다. 사용자가 확인란을 클릭하여 검색 결과의 JSON 피드를 필터링 할 수있는 인터페이스를 만들고 있습니다. 이 지침 템플릿 계층 구조는 다음과 같다 :

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

내가 filtergroup에 대한 템플릿 내에서 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; 
    } 
};}]); 

이 나는 ​​또한에 문제의 단순화 Codepen을 만들었습니다

이 날 미치게 될 때

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

어떤 도움도 좋을 것! 감사합니다

Answer 1

require: '^filtergroup'라고 말하면 filtergroup의 컨트롤러에 링크 기능을 삽입하라는 것입니다. 그렇다면 그것을 사용하는 방법은 당신에게 달려 있습니다.

귀하의 경우에는

, 당신의 범위 '는 filter에의 참조'는 filtergroupCtrl을 추가 할 수 있습니다

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

당신이 아이의 템플릿에 당신이 시도하고있는 방법으로 액세스 할 수 있습니다이 방법을 해야할 일 :

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