두 개의 사이드 바이 사이드 지시어가 AngularJS에서 서로 통신 할 수 있습니까?

Question

은 내가 AngularJS와의 지침으로 분리하고 싶었다 같은 HTML 코드

<a href="#" id="someLink"> 
    <i class="someClass"></i><span>Some span text</span> 
</a> 
<div id="dependsOnSomeLink"> 
    <!-- something here --> 
</div> 

했다. 그 뒤에있는 논리는 div의 내용이 기본적으로 숨겨져 있으며 a 요소를 클릭하여 표시됩니다.

angular.module('someModule', []) 
    .directive('prAbc', function($log) { 
    return { 
     require: 'prDef', 
     restrict: 'E', 
     template: '<a href="#" id="someLink"><i class="someClass"></i><span>Some span text</span></a>', 
     controller: function($scope, $element, $attrs, $transclude) { 
     // do the harlem share <-- here 
     }, 
     link: function(scope, iElement, iAttrs, prDef, transcludeFn) { 
     iElement.bind('click', function() { 
      prDef.toggleDependentBlock(); 
     }); 
     } 
    }; 
    }) 
    .directive('prDef', function($log) 
    { 
    return { 
     restrict: 'E', 
     template: '<div id="dependsOnSomeLink"></div>', 
     controller: function($scope, $element, $attrs, $transclude) { 
     $scope.showDependentBlock = false; 

     this.toggleDependentBlock = function() { 
      $scope.showDependentBlock = false === $scope.showDependentBlock; 
     }; 
     } 
    }; 
    }); 

나중에는 prAbc 지침에서 호출 될 때이

<pr-abc></pr-abc> 
<pr-def></pr-def> 

그러나 prDef이 정의되지 않은처럼 사용

나는 그런 두 지시로 그를 분리하고 싶었다.

Answer 1

require: 'prDef'prAbc 및 prDef이 동일한 DOM 요소에 적용될 때 작동하지만, 귀하의 경우는 그렇지 않습니다.

두 개의 통신 명령 사이에서 라우터 역할을하는 "상위"지침이 필요할 수 있습니다. prDef은 부모 컨트롤러에 자신을 등록하고 prAbc은 부모 컨트롤러를 호출하고, 다시 prDef을 호출합니다.

체크 아웃이 plucker입니다.

적어도 3 다른 옵션을 고려 있습니다

1. 는 상위 컨트롤러가 prAbc를 방출 특정 이벤트를 수신하고 prDef가 수신하는 경우, 아래를 방송하게한다.

2. 등록 및 라우팅을 위해 자식 컨트롤러에 콜백 함수 ('&')를 전달하도록합니다.

3. 모든 기능 및 데이터는 부모에 정의되어 있으며 바인딩 또는 프로토 타입 상속을 통해 하위 지시문에 전달됩니다 (기본적으로 디자인을 망치는 P). 3 개 옵션의

는 부모 컨트롤러는 당신처럼 적용되는 컨트롤러가 될 수 지시문에 정의 할 필요가 없습니다 :

<div ng-contoller="ParentCtrl"> 
    <pr-abc></pr-abc> 
    <pr-def></pr-def> 
</div> 

당신의 예는 충분히 컨텍스트를 제공하지 않습니다 어떤 옵션이 최선인지에 대한 이유는 있지만, 부모 지시어가 선호되는 방법이라고 생각합니다.

도움이된다면 ui-bootstrap의 tabs 및 accordion이 어떻게 구현되는지 확인하십시오. 이는 협업적이고 여전히 분리 된 지시어 세트의 매우 유용한 예입니다.