Javascript 如何避免子窗体在AngularJS中使外部窗体$dirty？

AngularJS中的表单有时会变得有点难看。那是我的案子。我有三种形式的看似简单的结构。其中两个应该相互关联，而第三个应该完全分开

<form name="foo">
   <div ng-repeat="f in foo.list">
      <custom-component ng-form="foo['f_'+$index+'_something']"></custom-component>
   </div>
</form>

以上是主要形式。它将自身的某些部分绑定到自定义组件

另一方面，组件内部有两种形式：

<div ng-form="$ctrl.form">
   <!--foo-->
</div>
<some-popup>
   <div ng-form="$ctrl.popupForm">
      <!--foo-->
   </div >
</some-popup>

问题是，

popupForm

以某种方式自动与其他表单绑定。结果与预期相去甚远。当我修改

popupForm

时，它会使

foo

表单上的项目变脏。此外，如果

popupForm

上的某些字段不符合验证标准，并且关闭了弹出窗口，则错误将传播到

foo

表单的项。最新的问题可以用

ng解决，如果
指令在弹出窗口被隐藏时用于从DOM中“删除”
popupForm
，但它仍然不是完整的解决方案

有没有办法使表单（
popupForm
）与其他表单完全分离？我能以某种方式阻止嵌套表单吗？
标准HTML不允许嵌套表单。请查看。
可用于从父窗体中删除子窗体

$removeControl（控制）；
从窗体中注销控件

使用的输入元素在销毁时会自动执行此操作


这个问题更复杂。正如前面提到的，HTML标准不允许嵌套--允许的内容

如果您不打算将此
与
交叉验证，通常应通过附加/追加
弹出式
元素执行不同的DOM元素

例如，
angular ui
组件引导模式具有名为
appendTo
的属性。如果您使用的是Bootrstrap或materialdesign等模型，这应该可以解决继承问题

更棘手的替代方案包括创建自定义
指令
，并使用$compile
compile
函数附加元素

如果您计划进行交叉验证，则应使用
服务
/
提供商
解决此问题，以实现通信和可测试性。
@使用ng表单而不是表单，这是相同的。