Question

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

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

编译第一个子表单并将其附加到div。
第二个子表单直接包含在指令的模板中。

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

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>"
});

这是正在运行的Plunker：

https://plnkr.co/edit/YfBRY4xPvKgqDtWXFMUi

Answer 1

这是因为在编译该子表单后，尚未设置子表单$$parentForm的{{1}}。我不知道为什么，我想它需要更深入的知识。

我在不同的编译阶段（preLink，postLink）尝试了formController并得到了相同的结果。但是我几乎用两种方法实现了目标：

首先是直接指定$compile()()，如$$parentForm。 Here是我的附带示例（通知我将childScope.innerForm.$$parentForm = scope.outterForm;更改为components，因为它们更灵活。）
其次是重新编译父表单（但这会使无用的手动子表单编译）。 Here是第二个掠夺者的例子。

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

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

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

在AngularJS指令中编译表单

1 个答案: