我有一个模态窗口,我用来向用户提交表单。他们输入信息,然后按一个有ng单击的按钮。服务器处理请求并发回一个响应。当响应成功时,我想关闭来自控制器的模态窗口。如何实现呢?
模态是另一个页面中包含的一部分
主页:
<!-- main content --> <p>Foo</p> <!-- angular directive --> <foo-directive></foo-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>
模态标记:
<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>
控制器代码:
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 }); } };
提前致谢,
解决方法
你看过
angular-ui bootstrap吗?有一个对话框(ui.bootstrap.dialog)指令,工作相当不错。您可以在回调角度方式(按照示例)期间关闭对话框:
$scope.close = function(result){ dialog.close(result); };
更新:
该指令后来更名为Modal。