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

标记

我正在使用模态窗口上传图像。但是,当单击“上传”时,我要上传图像,然后关闭模式窗口。当我data-dismiss="modal"在按钮中用作属性时,它只是关闭了窗口而没有执行任何其他操作。所以我找到了一些如何关闭它的选项,但是一切都在Jquery的帮助下完成,例如:$('#my-modal').modal('hide');但是我使用了angular并尝试在控制器中完成它,但是没有成功。我也尝试这些答案关闭Bootstrap模态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 = [];
                });
            }
        };
标记

最后,我通过调用关闭按钮上的click事件解决了我的问题,该按钮做了data-dismiss =“ modal”并关闭了modal对话框。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何关闭引导中的弹出模式窗口

来自分类Dev

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

来自分类Dev

关闭引导程序模式后如何重置angularjs的表单验证

来自分类Dev

如何关闭模式弹出窗口?

来自分类Dev

angularjs在$ document点击关闭模式窗口

来自分类Dev

防止引导模式窗口在表单提交时关闭

来自分类Dev

从控制器关闭角度引导程序模式窗口

来自分类Dev

关闭引导程序模式弹出窗口时的方法调用

来自分类Dev

在引导程序模式窗口中更改关闭按钮的颜色

来自分类Dev

AJAX成功后如何关闭模式窗口

来自分类Dev

防止在ASP.Net按钮回发时关闭模式弹出窗口(引导)窗口

来自分类Dev

AngularJS-如何关闭hashbang模式

来自分类Dev

如何知道引导程序模式关闭时单击了哪个按钮?

来自分类Dev

如何使用onclick防止引导模式从按钮关闭?

来自分类Dev

引导程序模式关闭后如何重新加载页面

来自分类Dev

如何防止仅在退格按键上关闭引导程序模式

来自分类Dev

引导模式:如何淡入,但在关闭时立即消失

来自分类Dev

执行javascript时如何防止引导模式关闭

来自分类Dev

如何在反应中收听引导模式关闭事件

来自分类Dev

如何在wicket的引导模式窗口中验证表单?

来自分类Dev

如何使用最后弹出的模式上的关闭按钮关闭多个引导程序模式

来自分类Dev

停止在窗口外部单击时关闭引导程序模式吗?

来自分类Dev

打开和关闭引导模式

来自分类Dev

自动关闭模态窗口?如何使模式窗口过一会儿自动关闭?

来自分类Dev

x秒后如何关闭精益模式弹出窗口?

来自分类Dev

如何:有2个单独的按钮关闭模式弹出窗口?

来自分类Dev

仅在按“取消”按钮时如何关闭模式弹出窗口?

来自分类Dev

如何使用angularjs在关闭窗口时触发函数

来自分类Dev

如何在AngularJS中关闭浏览器窗口

Related 相关文章

  1. 1

    如何关闭引导中的弹出模式窗口

  2. 2

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

  3. 3

    关闭引导程序模式后如何重置angularjs的表单验证

  4. 4

    如何关闭模式弹出窗口?

  5. 5

    angularjs在$ document点击关闭模式窗口

  6. 6

    防止引导模式窗口在表单提交时关闭

  7. 7

    从控制器关闭角度引导程序模式窗口

  8. 8

    关闭引导程序模式弹出窗口时的方法调用

  9. 9

    在引导程序模式窗口中更改关闭按钮的颜色

  10. 10

    AJAX成功后如何关闭模式窗口

  11. 11

    防止在ASP.Net按钮回发时关闭模式弹出窗口(引导)窗口

  12. 12

    AngularJS-如何关闭hashbang模式

  13. 13

    如何知道引导程序模式关闭时单击了哪个按钮?

  14. 14

    如何使用onclick防止引导模式从按钮关闭?

  15. 15

    引导程序模式关闭后如何重新加载页面

  16. 16

    如何防止仅在退格按键上关闭引导程序模式

  17. 17

    引导模式:如何淡入,但在关闭时立即消失

  18. 18

    执行javascript时如何防止引导模式关闭

  19. 19

    如何在反应中收听引导模式关闭事件

  20. 20

    如何在wicket的引导模式窗口中验证表单?

  21. 21

    如何使用最后弹出的模式上的关闭按钮关闭多个引导程序模式

  22. 22

    停止在窗口外部单击时关闭引导程序模式吗?

  23. 23

    打开和关闭引导模式

  24. 24

    自动关闭模态窗口?如何使模式窗口过一会儿自动关闭?

  25. 25

    x秒后如何关闭精益模式弹出窗口?

  26. 26

    如何:有2个单独的按钮关闭模式弹出窗口?

  27. 27

    仅在按“取消”按钮时如何关闭模式弹出窗口?

  28. 28

    如何使用angularjs在关闭窗口时触发函数

  29. 29

    如何在AngularJS中关闭浏览器窗口

热门标签

归档