Javascript 编译AngularJS指令内部的表单

我用一个表单写了一个AngularJS指令。该表单有一个必需的文本字段以及两个其他表单。每个子表单都有另一个必需的文本字段

这两个子表单之间的区别在于我如何创建它们：

第一个子表单被编译并附加到div中

第二个子表单直接包含在指令的模板中

如果第二个子表单无效，则整个outter表单将无效。这是我所期望的。但是，如果第一个子窗体（我手动编译的那个）变得无效，它对外部父窗体没有影响。为什么?

var-app=angular.module（'plunker'，[]）；
附件组件（“发电机”{
模板：“+
"" + 
"" +
"" +
“有效outterForm:{{outterForm.$Valid}}”+
"",
控制器：函数（$compile，$scope，$document）{
var componentContainer=$document.find（“#组件容器”）；
var模板=”；
var childScope=$scope.$new（）；
var result=componentContainer.append（模板）；
$compile（result）（childScope）；
}
});
应用程序组件（'myText'{
模板：“有效的innerForm:{{innerForm.$Valid}}”
});

这是一个奔跑的猛扑：

---

这是因为编译子表单后，尚未设置子表单的

$$parentForm

formController。我不知道为什么，我想它需要更深入的知识

我在不同的编译阶段（预链接、后链接）尝试了

$compile（）（）

，得到了相同的结果。然而，我几乎通过两种方法实现了目标：

• 第一个是像下面这样直接分配

  $$parentForm

  childScope.innerForm.$$parentForm=scope.outterForm。是我的plunker示例（注意我将

  组件

  更改为

  指令

  ，因为它们更灵活）
• 第二种方法是重新编译父表单（但这会导致无用的手动子表单编译）。这是第二个plunker示例

但是在这两种方法中都存在一个巨大的问题——动态设置子表单名称和模型（应该是这样，因为您希望在多个子表单上使用一个指令）

在第一种方法中并没有错误，但有一个bug：当您更改第二个子表单的模型时，它会更改第一个子表单的模型（当您调整第一个子表单的模型时，它会停止）

---

在第二种方法中，一切似乎都很好，但在后台，每次更改模型时都会出现很多错误。

嵌套形式有什么意义？不能嵌套HTML表单，但可以嵌套ng表单。如果使用组件，这将非常有用。组件可以实现表单。如果在另一个表单中重复使用此组件，则将有两个嵌套表单。我认为这是绝对有效的。那么表格应该有不同的名称吗？idk，太懒了，无法测试它。很好的一点，但不幸的是，这并没有改变什么。非常感谢你们的解释！我还发现了另一件事：如果您在所有内容周围放置一个普通的HTML表单，则该表单的行为与预期的一样，并且只有在所有子表单都有效的情况下才有效。如果您感兴趣，这里有一个建议：如果您将新的外部表单更改为

ng-form

，它也会工作=）我认为，为了正确工作，需要在家长之前编译子指令。在外部表单开始编译之前，所有子表单都已编译。

ngForm

是一个动态表单部分，需要一个父

标记，而不是表单本身。Nest

ngForms

也将起作用，这是由于该指令的性质，该指令寻找一个引用所属，但较低的引用也是一个

ngForm

也需要一个父引用。因此，它们之间的关系只起作用，因为它们可以属于父对象。正确的使用方法是设置表单，有条件地嵌套其

ngForm

部分，甚至手动编译的部分也可以工作。但是，我只是想知道：这只是一个实验吗？为什么需要手动编译这样的东西？@mateuduarteponcedeleon我尝试构建一个应用程序，该应用程序基于外部配置生成一个大表单，该配置从后端作为JSON提供。这就是我问题的背景：）

var app = angular.module('plunker', []);

app.component('generator', {
    template: "<ng-form name=\"outterForm\">" + 
                  "<input name=\"out\" ng-model=\"$ctrl.out\" ng-minlength=\"5\" ng-required=\"true\" type=\"text\" />" + 
                  "<div id=\"component-container\"></div>" +
                  "<my-text></my-text>" +
                  "<div>Valid outterForm: {{outterForm.$valid}}</div>" +
              "</ng-form>",
    controller: function($compile, $scope, $document) {
        var componentContainer = $document.find('#component-container');
        var template = "<my-text></my-text>";
        var childScope = $scope.$new();
        var result = componentContainer.append(template);
        $compile(result)(childScope);
    }
});

app.component('myText', {
    template: "<ng-form name=\"innerForm\"><input name=\"name\" ng-model=\"$ctrl.name\" ng-minlength=\"5\" ng-required=\"true\" type=\"text\" />Valid innerForm: {{innerForm.$valid}}</ng-form>"
});