How to properly open and close Bootstrap modal from AngularJS

Question

On my html page, I got just a simple Bootstrap modal and button to call it:

        <button class="btn btn-primary" data-toggle="modal" data-target="#addUpdateGroup">Add group</button>

        <div class="modal fade" id="addUpdateGroup" tabindex="-1" role="dialog" aria-labelledby="addUpdateGrouplLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    </div>
                    <form name="addUpdateGroupForm" ng-submit="addUpdateGroupForm.$valid && groupCtrl.addUpdateGroup()" novalidate>                         
                        <div class="modal-body">
                                <input type="hidden" ng-model="groupCtrl.group.id" name="groupid" />
                                <label for="groupname">Group name:</label>
                                <br>
                                <input ng-model="groupCtrl.group.name" type="text" name="groupname" id="groupname" required />
                                <br><br>
                                <label for="groupcolor">Boja grupe:</label>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Add</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </form>                         
                </div>
            </div>
        </div>

It's a just simple form. The validation is done by AngularJS.

Now...when user submits the form, I'd like for the modal to close, but ONLY if it was valid input.

So I've put the code for closing the modal into the controller:

this.addUpdateGroup = function() {
    // Adding a new group
    if (typeof this.group.id === 'undefined') {
        this.id += 1;
        this.group.id = this.id;
        this.groups.push(this.group);
    // Updating an existing group
    } else {
        this.groups[this.group.id].name = this.group.name;
        this.groups[this.group.id].color = this.group.color;
    }
    // Clean the form and remove the modal
    this.group = {};
    $scope.addUpdateGroupForm.$setPristine(true);
    $('.modal').modal('hide');
};

But this doesn't follow the best practice of not manipulating the DOM from the controller.

QUESTION: Is there a better way? How would you implement a modal which needs to be shown or hidden when certain function in controller is called?

No. Do you mean this? http://angular-ui.github.io/bootstrap/ It looks to me like it's still manipulating DOM from the controller, right? — CodeVirtuoso, Sep 28 '14 at 21:40
NO. That is the point if you use angulal ui bootstrap you dont have to access DOM or anything yourself. You just deal with modal object and promises. — PSL, Sep 28 '14 at 21:43

score 3 · Accepted Answer · edited May 23 '17 at 11:49

You are not following Angular best practices. If you havent done so already, review this legendary answer: https://stackoverflow.com/a/15012542/202913 Specifically points 1 - 3 of that post.

That out of the way, you should be using either of the following two libraries. Both of them implement Bootstrap's functionality, but with a native Angular implementation, i.e. it does not rely on the Javascript library of Bootstrap (but does use the Bootstrap's CSS):

Both are excellent, so use whichever library feels more comfortable to your coding style.

How to properly open and close Bootstrap modal from AngularJS

1 Answers1