如何从 angularjs 关闭引导模式窗口

Question

我正在使用模式窗口来上传图像。但是当点击上传时，我想上传图片，然后关闭模式窗口。当我在按钮中使用data-dismiss="modal" 作为属性时，它只是关闭了窗口，什么也没做。所以我找到了一些如何关闭它的选项，但一切都是在 Jquery 的帮助下进行的，例如：$('#my-modal').modal('hide'); 但我正在使用 angular 并尝试在控制器中执行此操作，但我没有成功。我也尝试了这些答案Closing Bootstrap modal onclick，但没有运气。

最后我是这样做的：

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);

它会关闭模态窗口，但我无法在我的网页上滚动。我不知道如何做得更好。

谁能帮我弄清楚如何从 angularjs 关闭模式窗口，或者至少我如何在 angularjs 中使用 jquery？

编辑： 我打开模式窗口的 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 模态窗口：

<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>

角度控制器：

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 = [];
                });
            }
        };

Answer 1

您并没有真正展示您的应用程序的结构，但来自ui-bootstrap 文档：

open 方法返回一个模态实例，一个具有以下属性的对象：

close(result) - 一种可用于关闭模式，传递结果的方法

此外，与模态内容相关的范围增加了两种方法：

$close(结果)

可能后者是您要使用的那个，所以当您单击upload 按钮时会出现这样的情况：

<button ng-click="uploadAndClose()"> Upload </button>

控制器：

$scope.uploadAndClose = function() {
  // your upload code, e.g.:
  $upload($scope.file);
  // This line closes the modal.
  $scope.$close($scope.file);
}

---

修改后：

在我看来，您正在尝试以“香草”形式使用引导程序，而不是使用出色的 ui-bootstrap 模块。这将非常尴尬，并且超出了单个 stackoverflow 问题的范围。

但更重要的是，这表明您对 angular 没有很好的理解 - angular 在创建可重用组件方面优秀，并且利用 bootstrap 或 jquery 插件很少是一个好主意.

我建议提高您对 Angular 的了解，尤其是指令和服务的基本概念。我强烈推荐关注thinkster.io 课程。

Answer 2

最后我通过调用关闭按钮上的点击事件解决了我的问题，该按钮执行 data-dismiss="modal" 并关闭了模式对话框。

Answer 3

<div class="{{model_show?'model fade content':'modal-content'}}" role="model"><br><button ng-click="model_show = 1" data-dismiss="modal">Close</button>

只需为班级设置条件，然后单击关闭按钮更改 model_show=1 就是这样