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