twitter-bootstrap 如何从 angularjs 关闭引导模式窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27470697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to close bootstrap modal window from angularjs
提问by mark
I am using modal window for the upload of images. But when click on upload I want to upload the images and then close the modal window. When I used data-dismiss="modal"as attribute in button it just closed the window and did nothing else. So I found some options how to close it but everything was with the help of Jquery e.g.: $('#my-modal').modal('hide');but I am using angular and try to do it in controller but I did not succeeded. I also try these answers Closing Bootstrap modal onclickbut with no luck.
我正在使用模态窗口来上传图像。但是当点击上传时，我想上传图片，然后关闭模态窗口。当我data-dismiss="modal"在按钮中用作属性时，它只是关闭了窗口，什么也不做。所以我找到了一些如何关闭它的选项，但一切都是在 Jquery 的帮助下完成的，例如：$('#my-modal').modal('hide');但我正在使用 angular 并尝试在控制器中执行此操作，但我没有成功。我也尝试了这些答案Closing Bootstrap modal onclick但没有运气。
Finally I did it this way:
最后我是这样做的：
document.getElementById('fileUpload').value = null;
var dialog = document.getElementById('complete-dialog');
dialog.style.display = 'none';
dialog.className = 'modal fade';
dialog.setAttribute('aria-hidden', 'true');
dialog.removeChild(dialog.firstChild);
and it closes modal window but then I cannot scroll on my web page. I have no idea how to do it better.
它关闭了模态窗口，但随后我无法在我的网页上滚动。我不知道如何做得更好。
Can anybody help me to figure it out how to close the modal window from angularjs or at least how can I use jquery inside of angularjs?
任何人都可以帮助我弄清楚如何从 angularjs 关闭模态窗口，或者至少我如何在 angularjs 中使用 jquery？
EDIT: HTML where I open modal window:
编辑：我打开模态窗口的HTML：
<div class="image col-lg-2 col-lg-offset-2 col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1">
<button class="btn btn-fab btn-raised btn-primary" data-toggle="modal" data-target="#complete-dialog"><i class="mdi-image-edit"></i></button>
</div>
HTML modal window:
HTML 模态窗口：
<div id="complete-dialog" class="modal fade" tabindex="-1">
<div id="test-dialog" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close close-btn" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" style="color: black;">Upload profile picture</h4>
</div>
<div class="modal-body" style="color: black;">
<form name="userForm" data-ng-submit="profile.uploadImageToServer()" autocomplete="off">
<div class="form-group">
<!--<label for="fileUpload">Profile image</label>-->
<input type="file" name="fileUpload" id="fileUpload" onchange="angular.element(this).scope().uploadImg(this.files)">
</div>
<div class="text-center form-group">
<button id="submit-btn" type="submit" class="btn btn-large btn-primary">Upload Image</button>
</div>
</form>
</div>
<!--<div class="modal-footer">-->
<!--</div>-->
</form>
</div>
</div>
</div>
Angular controller:
角度控制器：
me.uploadImageToServer = function(){
console.log('uploading');
console.log($scope.file);
var fd = new FormData();
//Take the first selected file
fd.append('file', $scope.file[0]);
if($scope.file.length>0) {
me.user.image = '/img/'+ me.user._id + (($scope.file[0].type.indexOf('png') > -1) ? '.png' : '.jpg');
User.update(me.user, function(response){
AuthenticationState.user = response.data;
}, function(response){
console.log(response);
});
User.uploadImage(fd, function (response) {
console.log(response);
me.user.image = me.user.image + '?time=' + new Date().getTime();
AuthenticationState.user.image = me.user.image;
document.getElementById('fileUpload').value = null;
//var dialog = document.getElementById('complete-dialog');
//dialog.style.display = 'none';
//dialog.className = 'modal fade';
//dialog.setAttribute('aria-hidden', 'true');
//dialog.removeChild(dialog.firstChild);
$scope.$close(me.file);
me.file = [];
}, function (response) {
console.log(response);
me.file = [];
});
}
};
回答by Ed Hinchliffe
You haven't really shown how your app is structured, but from the ui-bootstrapdocumentation:
您还没有真正展示您的应用程序的结构，而是来自ui-bootstrap文档：
The open method returns a modal instance, an object with the following properties:
close(result)- a method that can be used to close a modal, passing a result
In addition the scope associated with modal's content is augmented with 2 methods:
$close(result)
open 方法返回一个模态实例，一个具有以下属性的对象：
close(result)- 一种可用于关闭模态并传递结果的方法
此外，与模态内容相关的范围还增加了 2 个方法：
$关闭（结果）
Probably the latter is the one you want to use, so you would have something like this when you click the uploadbutton:
可能后者是您想要使用的，因此当您单击upload按钮时，您会看到类似的内容：
<button ng-click="uploadAndClose()"> Upload </button>
Controller:
控制器：
$scope.uploadAndClose = function() {
// your upload code, e.g.:
$upload($scope.file);
// This line closes the modal.
$scope.$close($scope.file);
}
After your edits:
修改后：
It looks to me like you are trying to use bootstrap in its 'vanilla' form rather than using the excellent ui-bootstrapmodule. This will be very awkward and is outside the scope of a single stackoverflow question.
在我看来，您正在尝试以“vanilla”形式使用引导程序，而不是使用优秀的ui-bootstrap模块。这将非常尴尬，并且超出了单个 stackoverflow 问题的范围。
More importantly, though, it shows you don't have a good understanding of angular - angular is excellentfor creating re-useable components, and leveraging bootstrap or jquery plugins is very rarely a good idea.
更重要的是，它表明您对 angular 没有很好的理解——angular非常适合创建可重用的组件，而利用 bootstrap 或 jquery 插件很少是一个好主意。
I suggest improving your knowledge of angular, particularly the fundamental concepts of directives and services. I highly recommend following the thinkster.iocourse on the subject.
我建议提高您对 angular 的了解，尤其是指令和服务的基本概念。我强烈建议您学习有关该主题的thinkster.io课程。
回答by mark
Finally I resolved my problem by invoking the click event on close button which did data-dismiss="modal" and closed the modal dialog.
最后，我通过调用关闭按钮上的 click 事件解决了我的问题，该事件执行 data-dismiss="modal" 并关闭了模态对话框。
回答by hareesh reddy
<div class="{{model_show?'model fade content':'modal-content'}}" role="model"><br><button ng-click="model_show = 1" data-dismiss="modal">Close</button>
just put condition for class and when click on close button change model_show=1 thats it
只需为课程设置条件，然后单击关闭按钮更改 model_show=1 就是这样
