AngularJS之間的通信與嵌套指令

我已經創建了一個「分步」移動向導的DSL。 A <wizard>包含一個或多個<wz-section>，其中包含一個或多個<wz-step>。AngularJS之間的通信與嵌套指令

每個<wz-step>包含<wz-input-xyz>指令，它爲每個複雜類型（文本，布爾無線電選擇，帶有複選框的REST源列表視圖等）呈現特定的輸入字段。

<wz-step>指令具有其自己的隔離範圍，並在嚮導流到達該步驟時設置$scope.selected = true。

我不知道如何創建一組不同的<wz-input-xyz>指令其require: [^wzStep]，並可以閱讀從父<wz-step>範圍的一些變量（例如：顯示一個只讀文本或<input>控制）和它的觸發事件（例如： onFieldFilled()，讓嚮導移動到下一步或部分）。

這是主控制器模板：

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

我已經準備了一份的jsfiddle測試當前實現（嘗試擴大第一部分中，選中文本輸入，然後按回車鍵，你應該看到精靈移動到下一步/部分）：http://jsfiddle.net/gcacace/c178g34n/2/

來源

2014-08-31 GianluKa

使用父級的控制器從父指令等讀取這些變量。 – akonsu 2014-08-31 22:13:36

將邏輯移至服務。 – 2014-08-31 22:35:12

它看起來像$scope事件可以幫助你在這裏巨大。我之前自己建立了一個類似的系統，並且使用來自父母的$scope.$broadcast來告訴孩子關閉，並且從孩子處獲得$scope.$emit，以讓父母知道輸入已經「滿意」。

Angular $scope docs

你也可能想看看使用controllerAs你的指令來揭露父的API它在DOM孩子。

來源

2014-09-01 05:13:42 yelvert

我嘗試使用'$ scope。$ broadcast'，但它不起作用，嵌套的作用域是兄弟（因爲默認的跨越行爲）。如何使用'controllerAs'來幫助''之間的通信？ – GianluKa 2014-09-01 10:44:43

AngularJS之間的通信與嵌套指令

回答

相關問題