Question

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

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

我会在表单容器上使用隔离范围，并且还需要为字段创建一个transcluded范围，但我不确定该字段使用什么。我设想范围层次结构是这样的：

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

Scope（1）将具有从表单收集和POST数据的函数，但它需要访问绑定到范围（3）和（4）中的表单元素的数据。

这甚至可能吗？

由于首选的方法是将模式存储在范围（2）中，我需要将字段绑定到不同的变量名称~~，但它似乎不能插入ng-带有指令属性的模型。~~ 编辑：好像我可以在编译函数中手动执行此操作？ 第二次修改：修复this bug后。

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

有没有办法让范围（3）和（4）直接从范围（1）继承？

Answer 1

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

这是我试图用它来实现的指令控制器和让子指令更新通过其控制器在父指令中的值。

由于我不满意并希望看到更好的解决方案，我正在推动这个问题。

Answer 2

我找到了解决方案。我posted it here作为新问题的答案，因为我认为我原来的问题措辞严厉。

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

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

AngularJS - 具有子范围的Transcluded范围

2 个答案: