我有一个模态窗口,我用它来向用户显示一个表单。他们输入信息,然后按下一个按钮,有一个ng-click。服务器处理请求并发回一个响应。当响应成功时,我想从控制器关闭模态窗口。这是如何实现的?
模态是包含在另一页中的部分
主页:
<!-- 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
});
}
};
在成功和错误函数中,从控制器关闭模态的正确方法是什么?
8条答案
按热度按时间y1aodyip1#
不用angular-ui也可以实现同样的效果,这可以通过使用Angular 指令来实现。
首先将指令添加到模态。
创建新的Angular 方向:
现在从控制器调用dismiss()方法。
我还在使用angular js的早期阶段。我知道我们不应该在控制器内部操作DOM。所以我在指令中使用了DOM操作。我不确定这是否同样糟糕。如果我有更好的选择,我会在这里发布。
需要注意的是,我们不能简单地在视图中使用ng-hide或ng-show来隐藏或显示模态,这只是隐藏了模态而不是模态背景,我们必须调用modal()示例方法来完全删除模态。
noj0wjuj2#
你可以这样做:
ghg1uchk3#
你看过angular-ui bootstrap吗?有一个Dialog(ui. bootstrap. dialog)指令工作得很好。你可以在回调过程中关闭对话框(根据示例):
更新:
该指令后来被重命名为Modal。
oogrdqng4#
下面是一个可重用的Angular指令,它将隐藏和显示Bootstrap模态。
用法示例#1 -假设您要显示模态-您可以添加ng-if作为条件
用法示例#2 -在modal-visible属性中使用Angular 表达式
另一个例子-为了演示控制器交互,你可以添加这样的东西到你的控制器,它会显示模态后2秒,然后隐藏它5秒后。
我来不及回答这个问题了--为这里的另一个问题创建了这个指令。
希望这个有用。
yc0p9oo05#
您可以将data-dismiss=“modal”添加到调用angularjs函数的按钮属性中。
如:
6ljaweal6#
我已经将the answer by @isubuz和this answer by @Umur Kontacı on attribute directives重新混合到一个版本中,在这个版本中,控制器不调用类似DOM的操作(如"dismiss"),而是尝试更像MVVM风格,设置一个布尔属性
isInEditMode
。视图反过来将这一点信息链接到打开/关闭引导模式的属性指令。0ejtzxu17#
只需像我设置btnClose那样设置模态“关闭按钮”id,为了在Angular 模式下关闭模态,您必须像我一样触发关闭按钮click事件$(“#btnClose”).click()
nle07wnf8#
你可以用一个简单的jquery代码来完成。