How to close bootstrap modal window from angularjs

Question

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 onclick but with no luck.

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?

EDIT: HTML where I open modal window:

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

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

Solution 1

Finally I resolved my problem by invoking the click event on close button which did data-dismiss="modal" and closed the modal dialog.

Solution 2

You haven't really shown how your app is structured, but from the ui-bootstrap documentation:

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)

Probably the latter is the one you want to use, so you would have something like this when you click the upload button:

<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-bootstrap module. This will be very awkward and is outside the scope of a single stackoverflow question.

More importantly, though, it shows you don't have a good understanding of angular - angular is excellent for creating re-useable components, and leveraging bootstrap or jquery plugins is very rarely a good idea.

I suggest improving your knowledge of angular, particularly the fundamental concepts of directives and services. I highly recommend following the thinkster.io course on the subject.

Comments

[mark]

I tried your suggestion but it was not working for me. I added some code sample to my question. I hope that it will help you to help me.

[Ed_]

Are you using vanilla bootstrap and not the ui-bootstrap module? If so I suggest that you use ui-bootsrap from the link in my answer. Making a vanilla bootstrap module work with angular is outside the scope of the question. Furthermore some of your code suggests you should more thoroughly learn about angular before you consider trying to make a complex app with it.

[Dave Russell]

Thanks. This one has been driving me nuts for hours.

[mark]

@JTC You are welcome. I am glad that it helped someone :)