AngularJS - 带有子范围的嵌入范围答案

【问题标题】：AngularJS - Transcluded scope with child scopesAngularJS - 带有子范围的嵌入范围
【发布时间】：2013-07-08 23:01:42
【问题描述】：

我有一个案例，我想为模块化表单创建一个可重用的指令，其中有一个主表单指令旨在与字段输入指令的某种组合一起使用。像这样的：

<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 上插入指令的属性。~~ edit: 好像我可以在编译函数中手动执行此操作？ 第二次编辑：一旦this bug 被修复。

此外，表单提交功能无法直接访问范围 (2) 中的数据。您可以使用 $$nextSibling，但显然这是 bad practice.

有没有办法让作用域 (3) 和 (4) 直接从作用域 (1) 继承？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

http://plnkr.co/edit/F1e1mKA2UU3EL1M9yaJ0?p=preview

这就是我试图通过使用指令控制器并让子指令更新父指令中的值通过其控制器。

我不满意这个问题，希望看到更好的解决方案。

【讨论】：

【解决方案2】：

我找到了解决办法。我posted it here 作为一个新问题的答案，因为我认为我原来的问题措辞很糟糕。

基本上你不需要弄乱嵌入的范围。您只需在表单上使用标签和 ng-controller，或者将范围附加到表单标签的自定义指令。

要在指令中为 ng-model 使用动态值，您必须使用链接函数来修改指令的实例。有关所有详细信息，请参阅解决方案。

【讨论】：