- 首页
- 其他开发
- 从 Angular 控制器关闭 Twitter Bootstrap 模式
从 Angular 控制器关闭 Twitter Bootstrap 模式
[英] Closing Twitter Bootstrap Modal From Angular Controller
本文介绍了从 Angular 控制器关闭 Twitter Bootstrap 模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个模态窗口，用于向用户呈现表单.他们输入信息，然后按下一个按钮，然后单击.服务器处理请求并发回响应.当响应成功时，我想从控制器关闭模态窗口.如何实现?
模态是包含在另一个页面中的部分
主页:
<p>Foo</p><!-- 角度指令--><foo-directive></foo-directive>
该指令的内容:
<ul class="缩略图"><li class="span3 tile tile-white" ng-repeat="foo in model.foo"><div>{{foo.bar}}
<div>({{foo.bam}})
<div><a data-toggle="modal" href="#myModal"><img src="{{foo.imgPath}}"></a>
<!-- ejs 包含的 foo 模态部分 --><% 包含 foo_modal.ejs %>
模态标记:
<div id="fooModal" class="modal hidefade in" style="display: none; "><div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>新设备</h3>
<div class="modal-body"><h4>Foo Modal</h4><div ng-controller="FooCtrl"><表单名称=fooFrm"><input id="email" type="email" class="input-medium" ng-model="fooEmail"占位符=电子邮件"><button class="btn btn-primary btn-small"ng-click="doFoo({email:fooEmail})">电子邮件链接</button></表单>
<div class="modal-footer"><a href="#" class="btn" data-dismiss="modal">关闭</a>
控制器代码:
functionFooCtrl($scope, FooService) {$scope.doFoo= 函数(电子邮件){FooService.save({email:email.fooEmail}) {alert('请求成功');//TODO 在此处关闭名为 fooModal 的 Twitter 引导模式},功能(错误){alert('您的请求被拒绝了，抱歉');//TODO 在此处关闭名为 fooModal 的 twitter bootstrap modal});}};
在成功和错误函数中从控制器关闭模态的正确方法是什么?
提前致谢，
解决方案
你看过 angular-ui bootstrap?有一个 Dialog (ui.bootstrap.dialog) 指令效果很好.您可以在回调期间以角度方式关闭对话框(根据示例):
$scope.close = function(result){dialog.close(result);};
更新:
该指令已被重命名为Modal.
I have a modal window that I use to present a form to users. They enter the information and then press a button the has an ng-click. The server processes the request and sends back a response. When the response is success I want to close the modal window from the controller. How can this be achieved?
The modal is a partial included in another page
Main page:
<!-- main content -->
<p>Foo</p>
<!-- angular directive -->
<foo-directive></foo-directive>
Content of that directive:
<div ng-controller="FooCtrl">
<ul class="thumbnails">
<li class="span3 tile tile-white" ng-repeat="foo in model.foo">
<div>
{{foo.bar}}
</div>
<div>
({{foo.bam}})
</div>
<div>
<a data-toggle="modal" href="#myModal"><img src="{{foo.imgPath}}"></a>
</div>
</li>
</ul>
<!-- foo modal partial included by ejs -->
<% include foo_modal.ejs %>
</div>
Modal markup:
<div id="fooModal" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>New Device</h3>
</div>
<div class="modal-body">
<h4>Foo Modal</h4>
<div ng-controller="FooCtrl">
<form name="fooFrm">
<input id="email" type="email" class="input-medium" ng-model="fooEmail"
placeholder="Email">
<button class="btn btn-primary btn-small"
ng-click="doFoo({email:fooEmail})">Email Link</button>
</form>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
Controller code:
functionFooCtrl($scope, FooService) {
$scope.doFoo= function (email) {
FooService.save({email:email.fooEmail}) {
alert('Request successful');
//TODO close Twitter bootstrap modal named fooModal here
},
function (err) {
alert('Your request bonked, sorry');
//TODO close twitter bootstrap modal named fooModal here
});
}
};
What is the right way to close the modal from the controller in the success and error functions?
Thanks in advance,
解决方案
Have you looked at angular-ui bootstrap? There's a Dialog (ui.bootstrap.dialog) directive that works quite well. You can close the dialog during the call back the angular way (per the example):
$scope.close = function(result){
dialog.close(result);
};
Update:
The directive has since been renamed Modal.
这篇关于从 Angular 控制器关闭 Twitter Bootstrap 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
