Zugriff auf Modularform des eckigen Bootstrap vom Controller

Question

Ich versuche, vom modalen Controller auf das Formular zuzugreifen (Plunkr), aber myForm scheint nicht erreichbar zu sein. Wie Warnruf an die Arbeit machen:

angular.module('plunker', ['ui.bootstrap']); 
var ModalDemoCtrl = function ($scope, $modal, $log) { 
    $scope.open = function() { 
    var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: ModalInstanceCtrl   
    });  
    }; 
}; 

var ModalInstanceCtrl = function ($scope, $modalInstance) { 
    $scope.submit = function() { 
    // How to get this? 
    alert($scope.myForm.$dirty); 
    }; 

    $scope.ok = function() { 
    $modalInstance.close(); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
}; 

Und Vorlage:

<div ng-controller="ModalDemoCtrl"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3>I'm a modal!</h3> 
     </div> 
     <div class="modal-body"> 
      <form name="myForm" novalidate> 
      <input type="email" value="hello"> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" ng-click="submit()">OK</button> 
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 

    <button class="btn" ng-click="open()">Open me!</button> 
    <div ng-show="selected">Selection from a modal: {{ selected }}</div> 
</div> 

Answer 1

Diese war ein known bug in ui-Bootstrap. So injiziert $ modalInstance jetzt gut.

Behelfslösung ist Formularinstanz zum Eintragen Funktion explizit passieren: modals

<form name="myForm" novalidate ng-submit="submit(myForm)"> 
    <div class="modal-header"> 
    <h3>I'm a modal!</h3> 
    </div> 
    <div class="modal-body"> 
    <input type="email" value="hello"> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn btn-primary" type="submit">OK</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
    </div> 
</form> 

var ModalInstanceCtrl = function ($scope, $modalInstance) { 
    $scope.submit = function(myForm) { 
    alert(myForm.$dirty); 
    }; 
}; 

Answer 2

Angular-UI ist Einbindung Verwendung modalen Inhalt zu befestigen, was bedeutet, keine neue Rahmen Einträge innerhalb Modal geschaffen im kindlichen Umfang. Dies geschieht mit der Formularanweisung.

können Sie versuchen Formular mit (Angular 1.2.16) übergeordneten Bereich befestigen:

<form name="$parent.userForm"> 

Die userForm erstellt und in Controller $scope modale. Dank Scope-Vererbung bleibt der Zugriff im Markup unberührt.

<div ng-class="{'has-error': userForm.email.$invalid}"}> 

Answer 3

In Ihrem Controller hinzufügen, an der Spitze:

$scope.form = {}; 

im HTML-Template:

<form name="form.yourFormName"> 

Validierung auf HTML-Elemente:

<div ng-class="{'has-error': form.yourFormName.email.$invalid}"}> 

Siehe auch:

AngularJS modal dialog form object is undefined in controller

Answer 4

Am Ende ging ich mit der Antwort von gertas gegeben, aber die folgende ist ein weiterer Weg, dies zu lösen.

//place a method on modal controller scope 

     $scope.setFormReference = function (myForm) { 
      $scope.myForm = myForm 
     }; 

//call this using an angular expression in your modal template 

     {{ setFormReference(loginForm)}}