Доступ к угловой загрузочной модальной форме от контроллера

Question

Я пытаюсь получить доступ к форме из модального контроллера (Plunkr), но myForm, похоже, не доступен. Как получить аварийный вызов на работу:

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

И шаблон:

<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

Этот былknown bug в Ui-загрузчике. Так что инъекция $ modalInstance теперь прекрасна.

Обход должен пройти экземпляр формы функции представить в явном виде:

<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

модальности радиально-UI используют перенаправление прикрепить модальное содержание, которое означает, что любые новые записи области действия, сделанные в модальных созданы в охвате ребенка. Это происходит с директивой формы.

Вы можете попробовать прикрепить форму к родительской области с (1.2.16) Угловым:

<form name="$parent.userForm"> 

userForm создан и доступен в модальном регуляторе по $scope. Благодаря наложению наследования userForm доступ остается незатронутым в разметке.

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

Answer 3

В контроллере добавить в верхней части:

$scope.form = {}; 

В шаблоне HTML:

<form name="form.yourFormName"> 

Проверка на HTML элементов:

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

Смотрите также:

AngularJS modal dialog form object is undefined in controller

Answer 4

В конце концов я пошел с ответом на данный gertas, но следующий другой способ решения этого.

//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)}}