twitter-bootstrap 从控制器访问角度引导模式表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20713633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing angular bootstrap modal form from controller
提问by cyberwombat
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>
采纳答案by Stewie
This wasan known bugin 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);
};
};
回答by gertas
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 模态使用嵌入来附加模态内容，这意味着在模态中创建的任何新范围条目都在子范围中创建。这发生在表单指令中。
You can try to attach form to parent scope with (Angular 1.2.16):
您可以尝试使用（Angular 1.2.16）将表单附加到父范围：
<form name="$parent.userForm">
The userFormis created and available in modal's controller $scope. Thanks to scope inheritance userFormaccess stays untouched in the markup.
在userForm创建和提供模式的控制器$scope。由于范围继承，userForm访问在标记中保持不变。
<div ng-class="{'has-error': userForm.email.$invalid}"}>
回答by Zymotik
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
回答by Kildareflare
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)}}
