I am trying to access the form from the modal controller (Plunkr) but myForm doesn't seem to be accessible. How to get alert call to work:
我试图从模态控制器(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');
};
};
And template:
和模板:
<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>
4 个解决方案
#1
17
This was an known bug in ui-bootstrap. So injecting $modalInstance works fine now.
这是ui-bootstrap中的已知错误。所以注入$ modalInstance现在工作正常。
Workaround is to pass form instance to the submit function explicitly:
解决方法是将表单实例显式传递给提交函数:
<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);
};
};
#2
18
Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope. This happens with form directive.
Angular-UI模式使用transclusion来附加模态内容,这意味着在modal中创建的任何新范围条目都是在子范围内创建的。这与form指令一起发生。
You can try to attach form to parent scope with (Angular 1.2.16):
您可以尝试使用(Angular 1.2.16)将表单附加到父作用域:
<form name="$parent.userForm">
The userForm
is created and available in modal's controller $scope
. Thanks to scope inheritance userForm
access stays untouched in the markup.
userForm已在模态的控制器$ scope中创建并可用。由于范围继承,userForm访问在标记中保持不变。
<div ng-class="{'has-error': userForm.email.$invalid}"}>
#3
2
In your controller add at the top:
在您的控制器中添加顶部:
$scope.form = {};
In the html template:
在html模板中:
<form name="form.yourFormName">
Validation on html elements:
验证html元素:
<div ng-class="{'has-error': form.yourFormName.email.$invalid}"}>
See also:
也可以看看:
AngularJS modal dialog form object is undefined in controller
AngularJS模式对话框表单对象在控制器中未定义
#4
0
In the end I went with the answer given by gertas, but the following is another way of resolving this.
最后我得到了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)}}
#1
17
This was an known bug in ui-bootstrap. So injecting $modalInstance works fine now.
这是ui-bootstrap中的已知错误。所以注入$ modalInstance现在工作正常。
Workaround is to pass form instance to the submit function explicitly:
解决方法是将表单实例显式传递给提交函数:
<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);
};
};
#2
18
Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope. This happens with form directive.
Angular-UI模式使用transclusion来附加模态内容,这意味着在modal中创建的任何新范围条目都是在子范围内创建的。这与form指令一起发生。
You can try to attach form to parent scope with (Angular 1.2.16):
您可以尝试使用(Angular 1.2.16)将表单附加到父作用域:
<form name="$parent.userForm">
The userForm
is created and available in modal's controller $scope
. Thanks to scope inheritance userForm
access stays untouched in the markup.
userForm已在模态的控制器$ scope中创建并可用。由于范围继承,userForm访问在标记中保持不变。
<div ng-class="{'has-error': userForm.email.$invalid}"}>
#3
2
In your controller add at the top:
在您的控制器中添加顶部:
$scope.form = {};
In the html template:
在html模板中:
<form name="form.yourFormName">
Validation on html elements:
验证html元素:
<div ng-class="{'has-error': form.yourFormName.email.$invalid}"}>
See also:
也可以看看:
AngularJS modal dialog form object is undefined in controller
AngularJS模式对话框表单对象在控制器中未定义
#4
0
In the end I went with the answer given by gertas, but the following is another way of resolving this.
最后我得到了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)}}