Formular innerhalb der AngularJS-Direktive kompilieren - Javascript, Winkeljs, Formulare, Kompilierung

Ich habe eine AngularJS-Direktive mit einem Formular geschrieben. Das Formular enthält ein erforderliches Textfeld sowie zwei weitere Formulare. Jedes der untergeordneten Formulare verfügt über ein weiteres erforderliches Textfeld.

Der Unterschied zwischen den beiden untergeordneten Formularen besteht darin, wie ich sie erstelle:

1. Das erste untergeordnete Formular wird kompiliert und an ein div angehängt.
2. Das zweite untergeordnete Formular ist direkt in der Vorlage der Richtlinie enthalten.

Wenn das zweite untergeordnete Formular ungültig ist, wird das GanzeDie äußere Form wird ungültig. Das habe ich erwartet. Wenn jedoch das erste untergeordnete Formular (das von mir manuell kompilierte) ungültig wird, hat dies keinen Einfluss auf das äußere übergeordnete Formular. Warum?

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

Hier ist der laufende Plunker:

https://plnkr.co/edit/YfBRY4xPvKgqDtWXFMUi

Antworten:

Das ist, weil $$parentForm der Unterform "s formController Es wurde nicht festgelegt, nachdem Sie dieses Unterformular kompiliert haben. Und ich weiß nicht, warum, ich nehme an, es erfordert tiefere Kenntnisse.

Ich versuchte zu $compile()() in verschiedenen Kompilierungsphasen (preLink, postLink) und hatten das gleiche Ergebnis. Ich erreiche das Ziel jedoch fast mit zwei Methoden:

• Zunächst ist zu vergeben $$parentForm direkt so childScope.innerForm.$$parentForm = scope.outterForm;. Hier ist mein Plunker Beispiel (beachten ich habe mich verändert components zu directives, weil sie flexibler sind).
• Zweitens muss das übergeordnete Formular neu kompiliert werden (dies macht jedoch die manuelle Kompilierung von Unterformularen überflüssig). Hier ist das zweite Plunkerbeispiel.

Aber! Bei beiden Methoden besteht ein großes Problem darin, Namen und Modelle von Unterformularen dynamisch festzulegen (dies sollte der Fall sein, da Sie eine Direktive für mehrere Unterformulare verwenden möchten).

In der ersten Methode gibt es keine Fehler, aber einen Fehler: Wenn Sie das Modell des zweiten Unterformulars ändern, ändert sich das Modell des ersten (es stoppt, wenn Sie das Modell des ersten Unterformulars einmal anpassen).

Bei der zweiten Methode scheint alles in Ordnung zu sein, aber hinter den Kulissen treten bei jedem Modellwechsel viele Fehler auf.