AngularJS - Transcluded与子作用域范围 [英] AngularJS - Transcluded scope with child scopes

问题描述

我有，我想创建一个模块化的形式，那里是旨在与现场输入指令的组合中使用的主要形式指令可重复使用的指令的​​情况。事情是这样的：

I have a case where I want to create a reusable directive for modular forms, where there is a main form directive that is intended to be used with some combination of field input directives. Something like this:

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

我会的形式容器上使用隔离范围，而且它也将需要创建领域的transcluded范围，但我不知道用什么样的领域。我设想的范围层次结构是这样的：

I would use an isolate scope on the form-container, and it would also need to create a transcluded scope for the fields, but I'm not sure what to use for the fields. I envision the scope hierarchy to be something like this:

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

范围（1）将有一个从形式收集和职位数据的功能，但它需要获得绑定到表单元素的范围内的（3）和数据（4）。

Scope (1) would have the function that collects and POSTs the data from the form, but it would need access to the data that is bound to the form elements in scopes (3) and (4).

这甚至可能吗？

由于pferred方式$ P $将存储在范围模式（2），我需要的字段绑定到不同的变量名称，<击>，但它似乎并不像我可以NG插值与指令的属性-model 编辑：好像我可以在编译功能手动做到这一点？ 2日编辑： 这个bug 固定

Since the preferred way would be to store the mode in scope (2), I would need the fields to be bound to different variable names, but it doesn't seem like I can interpolate on ng-model with a directive's attribute. edit: Seems like I can do this manually in a compile function? 2nd edit: once this bug is fixed.

此外，提交表单的功能不具有直接的范围访问数据（2）。你可以使用$$ nextSibling，但显然这是不好的做法。

In addition, the form submit functionality doesn't have direct access to the data in scope (2). You could use $$nextSibling, but apparently this is bad practice.

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

Is there a way to get scope (3) and (4) to inherit directly from scope (1)?

推荐答案

我已经找到了解决办法。我张贴在这里作为一个答案，一个新的问题，因为我觉得我原来的问题被严重措辞。

I have found a solution. I posted it here as an answer to a new question, since I thought my original question was worded badly.

基本上你不需要与transcluded范围一塌糊涂。您只需使用一个标签，要么在窗体上的NG-控制器，或自定义指令，附加一个范围的表单标签。

Basically you don't need to mess with transcluded scopes. You simply use a tag and either an ng-controller on the form, or a custom directive that attaches a scope to the form tag.

要在指令中使用动态值，NG-模式，你必须使用一个链接功能来修改指令的实例。看到所有的细节解决方案。

To use dynamic values for ng-model in the directive, you have to use a link function to modify the instance of the directive. See the solution for all the details.

这篇关于AngularJS - Transcluded与子作用域范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！