从访问控制的角度引导模式窗体 [英] Accessing angular bootstrap modal form from controller
本文介绍了从访问控制的角度引导模式窗体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想从模态控制器访问形式( Plunkr ),但myForm会似乎并没有被访问。如何获得工作警报呼叫:
angular.module('plunker',['ui.bootstrap']);
VAR ModalDemoCtrl =功能($范围,$模式,$日志){
$ scope.open =功能(){
VAR modalInstance = $ modal.open({
templateUrl:myModalContent.html',
控制器:ModalInstanceCtrl
});
};
};VAR ModalInstanceCtrl =功能($范围,$ modalInstance){
$ scope.submit =功能(){
//如何获得呢?
警报($ scope.myForm $脏);
}; $ scope.ok =功能(){
$ modalInstance.close();
}; $ scope.cancel =功能(){
$ modalInstance.dismiss('取消');
};
};
和模板:
< DIV NG控制器=ModalDemoCtrl>
<脚本类型=文/ NG-模板ID =myModalContent.html>
< DIV CLASS =模头>
< H3>我是一个模式<!/ H3 GT&;
< / DIV>
< DIV CLASS =模体>
<形式NAME =myForm会NOVALIDATE>
<输入类型=电子邮件值=你好>
< /表及GT;
< / DIV>
< DIV CLASS =模式躯>
<按钮类=BTN BTN-主要NG点击=提交()>确定< /按钮>
<按钮类=BTN BTN-警告NG点击=取消()>取消< /按钮>
< / DIV>
< / SCRIPT> <按钮类=BTNNG点击=open()的>打开ME<!/按钮>
< DIV NG秀=选择>从模式选择:{{}选择}< / DIV>
< / DIV>
解决方案
本是的的 UI中的自举已知的bug 。的因此注入$ modalInstance现在工作得很好。的
解决办法是要形成实例传递明确提交功能:
<形式NAME =myForm会NOVALIDATE NG-提交=提交(myForm会)>
< DIV CLASS =模头>
< H3>我是一个模式<!/ H3 GT&;
< / DIV>
< DIV CLASS =模体>
<输入类型=电子邮件值=你好>
< / DIV>
< DIV CLASS =模式躯>
<按钮类=BTN BTN-主要TYPE =提交>确定< /按钮>
<按钮类=BTN BTN-警告NG点击=取消()>取消< /按钮>
< / DIV>
< /表及GT;
VAR ModalInstanceCtrl =功能($范围,$ modalInstance){
$ scope.submit =功能(myForm会){
警报(myForm的$脏);
};
};
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:
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>
解决方案
This was an known bug in ui-bootstrap. So injecting $modalInstance works fine now.
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);
};
};
这篇关于从访问控制的角度引导模式窗体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文