ui-bootstrap modal won't close or dismiss

Question

New to ui-bootstrap and I've gotten the modal to appear, but can't get it to dismiss with a button press. I've tried a many combinations but nothing seems to work (or it makes the modal not appear at all).

The modal is in a separate file as:

<div ng-controller = 'entryCtrl' class="modal" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <div class="modal-inner-content">
                </div>
                <div class="modal-footer" id="modal-footer">
                    <button type="button" class="btn btn-success" ng-click="cancel()"><i class="glyphicon glyphicon-backward"></i> Back</button>
                    <button type="button" class="btn btn-danger" ng-click="ok()"><i class="glyphicon glyphicon-forward"></i> Continue</button>
                </div>
            </div>
        </div>
    </div>
</div>

It's called in a different html file with the same controller (I tried having them as different controllers, but then variables wouldn't appear to inject at all, i.e. the modal instance would be undefined).

In the controller, I can get the thing to open as:

xControllers.controller('entryCtrl', [
        '$scope', '$window', '$modal', '$log',
        'SharedProperties',
        function ($scope, $window, $modal, $log,
        SharedProperties) {

            $scope.open = function (size) {
                $scope.modal = $modal({
                    templateUrl: './views/modals/possible_slurs.html',
                    controllerAs: ['$window', '$log', '$modalInstance', function ($window, $log, $modalInstance) {
                        this.ok = function () {
                            $modalInstance.close();
                        };

                        this.cancel = function () {
                            $modalInstance.dismiss('cancel');
                            $window.history.back();
                        };
                                    }],
                    scope: $scope
                });
            };

    }]);

For some reason the $modal.open() doesn't work, and template, and controller parameters don't either (it only accepts templateUrl and controllerAs).

I attempted to have controllerAs set as a different controller, but then that separate controller wouldn't recognize the modal instance (it came up as undefined).

I have my dependencies set as:

var x = angular.module('x-app', [
        'xControllers',
        'ngAnimate',
        'ngRoute',
        'ngResource',
        'mgcrea.ngStrap',
        'angularUtils.directives.dirPagination',
        'ui.bootstrap'
    ]);

And their versions:

"dependencies": {
    "socket.io": "^2.2.0",
    "angular": "^1.7.8",
    "angular-animate": "^1.7.8",
    "angular-motion": "^0.4.4",
    "angular-resource": "^1.7.8",
    "angular-strap": "^2.3.12",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "angular-bootstrap": "^2.5.0"
  }

Thank you so much and please let me know if more information is needed to help with this!

score 0 · Accepted Answer · answered Jun 16 '20 at 17:49

This is the most convoluted thing I've ever come across. After several hours and days going back and forth in documentation, I've found the answer: which is, of course, that there were many, many problems going on and the fact that anything was showing up at all was a total fluke.

I'll just post what I got working, but suffice it to say: the Angular version is very important here.

The new working modal (notice that there is no controller specified here nor any of those wrapping divs):

<div class="modal-header"></div>
<div class="modal-body">
    <div class="modal-inner-content">
    </div>
    <div class="modal-footer" id="modal-footer">
        <button type="button" class="btn btn-success" ng-click="cancel()"><i class="glyphicon glyphicon-backward"></i> Back</button>
        <button type="button" class="btn btn-danger" ng-click="ok()"><i class="glyphicon glyphicon-forward"></i> Continue</button>
    </div>
</div>

The new working controller which opens the modal (note the switch to $uibModal):

xControllers.controller('entryCtrl', [
        '$scope', '$window', '$uibModal', '$log',
        'SharedProperties',
        function ($scope, $window, $uibModal, $log,
        SharedProperties) {

            $scope.open = function (size) {
                $uibModal.open({
                    templateUrl: './views/modals/modal.html',
                    controller: 'modalInstanceCtrl',
                    scope: $scope
                });
            };

    }]);

And the new modal controller called within that controller:

xControllers.controller('modalInstanceCtrl', [
        '$scope', '$window', '$uibModalInstance',
        function ($scope, $window, $uibModalInstance) {

        $scope.ok = function () {
            $uibModalInstance.close();
        };

        $scope.cancel = function () {
            $uibModalInstance.close();
            $window.history.back();
        };


    }]);

And that seemed to do the trick. A large thanks to whoever created this Plunker (http://embed.plnkr.co/4VcNom/) because the official documentation was essentially the opposite of useful in this regard (https://angular-ui.github.io/bootstrap/; it only handles the case where a modal's HTML is loaded in the same HTML doc as the main HTML, not for separate files).

Anywho, hope this helps others.

ui-bootstrap modal won't close or dismiss

1 Answers1