簡體   English   中英

AngularJS-帶子范圍的已包含范圍

[英]AngularJS - Transcluded scope with child scopes

我有一種情況,我想為模塊化表單創建可重用的指令,其中有一個主要的表單指令,旨在與字段輸入指令的某種組合一起使用。 像這樣:

<form-container submit-path="/path/to/api/">
    <input-field label="Foo"></input-field>
    <select-field label="Bar"></select-field>
</form-container>

我將在表單容器上使用隔離作用域,並且還需要為這些字段創建一個包含范圍的作用域,但是我不確定該對字段使用什么。 我設想范圍層次結構是這樣的:

- (1) form-container isolate scope
- (2) form-container transcluded scope
  - (3) input-field scope
  - (4) select-field scope

范圍(1)具有從表單收集和發布數據的功能,但是它需要訪問綁定到范圍(3)和(4)中的表單元素的數據。

這有可能嗎?

由於首選方式是將模式存儲在范圍(2)中,因此我需要將字段綁定到不同的變量名, 但是似乎我無法使用指令的屬性對ng-model進行插值。 編輯:似乎我可以在編譯功能中手動執行此操作? 第2次修改: 修復此錯誤后

此外,表單提交功能無法直接訪問范圍(2)中的數據。 您可以使用$$ nextSibling,但是顯然這是一種不好的做法。

有沒有辦法讓范圍(3)和(4)直接從范圍(1)繼承?

http://plnkr.co/edit/F1e1mKA2UU3EL1M9yaJ0?p=預覽

這就是我試圖通過使用指令控制器並讓子指令通過其控制器更新父指令中的值來實現的目的。

我不滿意並希望看到更好的解決方案,因此我對此問題表示贊同。

我找到了解決方案。 將其發布在這里,作為對新問題的答案,因為我認為我原來的問題用詞不好。

基本上,您不需要弄亂被包括在內的作用域。 您只需要在表單上使用標簽和ng-controller,或將范圍附加到表單標簽的自定義指令即可。

要為指令中的ng-model使用動態值,必須使用鏈接函數來修改指令的實例。 有關所有詳細信息,請參見解決方案。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM