Winkelform nicht im Bereich verfügbar

Question

Ich habe ein Formular in einem Controller, der nur geladen wird, wenn der Benutzer eine Taste innerhalb einer Direktive drückt, auf der das Ereignis mit $ emit weitergeleitet wird. Aber mein Problem ist, dass das Formular im Bereich nicht verfügbar ist und somit die Validierung des Formulars immer ungültig ist. Hier mein html ist,

<directive></directive> 

<div class="col-md-12 editForm" ng-if="editMode"> 
    <form name="editPollForm" id="editPollForm" ng-submit="editPoll()" novalidate> 
     <md-input-container> 
      <inpu ng-model="payload.a" required> 
     </md-input-container> 

     <md-input-container> 
      <inpu ng-model="payload.b" required> 
     </md-input-container> 

     <button type="submit" ng-disabled="editPollForm.$invalid"> Save</button> 
    </form> 
</div> 

Reglerfunktion

$scope.$on('pollEditFormRequested', function(event){ 
    $scope.payload = {}; 
    $scope.payload.a = 'a'; 
    $scope.payload.b = 'b'; 

    $scope.editMode = true; 
    console.log($scope.editPollForm); 
}); 

$scope.editPoll = function(){ 
    console.log($scope.editPollForm); 
    //call my submit edit form api 

}; 

auf $ durch die Richtlinie erzeugt emit catched und Werten gefüllt werden, funktioniert alles gut, aber die Submit-Button bleibt als ediPollForm deaktiviert ausgibt undefined auf alle console.logs

Was mache ich falsch? Ich habe versucht $timeout und $apply, aber ohne Erfolg.

Answer 1

Der Grund, warum das Formular nicht definiert ist, liegt daran, dass ng-if einen neuen untergeordneten Bereich erstellt, daher wird der übergeordnete Bereich keine Ahnung über das neue Formular haben. Um es wissen zu lassen, sollten Sie Ihr Formular in ein übergeordnetes Objekt umbrechen.

$scope.form = {} //with this object the parent will hold a reference to the form 
//created in the child scope 

$scope.$on('pollEditFormRequested', function(event){ 
    $scope.payload = {}; 
    $scope.payload.a = 'a'; 
    $scope.payload.b = 'b'; 

    $scope.editMode = true; 
    console.log($scope.form.editPollForm); //here the form will be undefined 
    //because it's not created yet 
}); 

$scope.editPoll = function(){ 
    console.log($scope.form.editPollForm); 
    //call my submit edit form api 

}; 

und in der Vorlage:

<div class="col-md-12 editForm" ng-if="editMode"> 
<!--new scope here--> 
    <form name="form.editPollForm" id="editPollForm" ng-submit="editPoll()" novalidate> 
     <md-input-container> 
      <inpu ng-model="payload.a" required> 
     </md-input-container> 
     <md-input-container> 
      <inpu ng-model="payload.b" required> 
     </md-input-container> 
     <button type="submit" ng-disabled="editPollForm.$invalid"> Save</button> 
    </form> 
</div> 

Answer 2

habe ich es geschafft, das Problem zu beheben, indem ng-show statt ng-if