중첩 된 지시어와 중첩 된 방향의 AngularJS 통신

Question

"단계별"모바일 마법사 용 DSL을 만들었습니다. <wizard>은 하나 이상의 <wz-step>을 포함하는 하나 이상의 <wz-section>을 포함합니다.

각 <wz-step>에는 <wz-input-xyz> 지시문이 들어있어 각 복합 유형 (텍스트, 부울 라디오 선택, 확인란이있는 REST 소싱 목록보기 등)에 대한 특정 입력 필드를 렌더링합니다.

<wz-step> 지시문은 자체 격리 범위가 있으며 마법사 흐름이 해당 단계에 도달하면 $scope.selected = true으로 설정됩니다.

내가 require: [^wzStep] 부모 <wz-step>에서 일부 범위 변수를 읽을 수있는 다른 <wz-input-xyz> 지침의 집합 만드는 방법을 모르는 : (그것에 트리거 이벤트 (예 : 읽기 전용 텍스트 또는 <input> 컨트롤을 보여를) 예를 들면 : onFieldFilled()) 마법사를 사용하여 다음 단계 또는 섹션으로 이동합니다.

이 메인 컨트롤러 템플릿입니다 : 나는 (현재의 구현을 테스트 첫 번째 섹션을 확장하려고하는 JsFiddle을 준비했습니다

<wizard id="mainWizard"> 
<wz-section id="myProfile" title="My Profile"> 
    <wz-step id="firstName" title="First Name"> 
     <wz-input-text model="submission.persons[0].FirstName"></wz-input-text> 
    </wz-step> 
    <wz-step id="lastName" title="Last Name"> 
     <wz-input-text model="submission.persons[0].LastName"></wz-input-text> 
    </wz-step> 
</wz-section> 
<wz-section id="myTreasure" title="My Treasure"> 
    <wz-step id="treasureMake" title="Treasure Make"> 
     <wz-input-text model="submission.treasures[0].Make"></wz-input-text> 
    </wz-step> 
    <wz-step id="treasureModel" title="Treasure Model"> 
     <wz-input-text model="submission.treasures[0].Model"></wz-input-text> 
    </wz-step> 
    <wz-step id="enableAdditionalFooBar" title="Do you need additional foobar?"> 
     <wz-input-radio-boolean model="wizardState.enableAdditionalFooBar" label-true="Yes, please" label-false="No, thanks"></wz-input-radio-boolean> 
    </wz-step> 
</wz-section> 
</wizard> 

, 텍스트 입력하고 Enter 키를 누릅니다 키를 선택, 당신은 마법사가 이동을 참조한다 다음 단계/섹션으로 이동) : http://jsfiddle.net/gcacace/c178g34n/2/

Answer 1

이벤트는 여기에 대단히 도움이 될 것 같습니다. 이전에 유사한 시스템을 구축했고 부모에게 자식을 알려주는 $scope.$broadcast을 사용하고 자식이 $scope.$emit을 사용하여 부모에게 입력이 "만족"되었음을 알립니다.

Angular $scope docs

당신은 또한이 DOM 어린이에 부모의 API를 노출하여 지시에 controllerAs를 사용하여보고 할 수 있습니다.