我有一个模式窗口,用于向用户展示表单。他们输入信息,然后按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引导程序?有一个Dialog(ui.bootstrap.dialog)指令效果很好。您可以在回调角度方式期间关闭对话框(按照示例):
$scope.close = function(result){ dialog.close(result); };
更新:
此指令自此已重命名为Modal。