bootstrap modal not close angular js

Question

I am using UI bootstrap modal dialog box with angular js. Modal is successfully loaded. But when I click YES/NO Button, issued occurred & modal did not close.

Error said, ' $uibModal.close is not a function'.

.directive('confirm', function(ConfirmService) {
    return {
        restrict: 'A',
        scope: {
            eventHandler: '&ngClick'
        },
        link: function(scope, element, attrs){
            element.unbind("click");
            element.bind("click", function(e) {
                ConfirmService.open(attrs.confirm, scope.eventHandler);
            });
        }
    }
})

This is my service

.service('ConfirmService', function($uibModal) {
    var service = {};
    service.open = function (text, onOk) {
        var modalInstance = $uibModal.open({
            templateUrl: 'modules/confirmation-box/confirmation-box.html',
            controller: 'userListCtrl',
            resolve: {
                text: function () {
                    return text;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            onOk();
        }, function () {
        });
    };

    return service;
})

This is my controller file. I am trying to yes/no button inside the controller

.controller('userListCtrl',
  ['$scope','$http','appConfig','$uibModalInstance', '$uibModal','$log','alertService',
  function ($scope,$http, appConfig,$uibModalInstance, $uibModal,$log,alertService) {

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

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };    

}]);

The `$uibModal` service has only one method: `open(options)`. So the error message is correct. — georgeawg, Jun 17 '19 at 12:26
The first edit changed `$uibModal.close()` to `$uibModalInstance.close()`. Was this intended because it really alters the entire question. — Lex, Jun 17 '19 at 14:12
[Callbacks from `.then` methods](https://stackoverflow.com/questions/35660881/why-are-callbacks-from-promise-then-methods-an-anti-pattern) is an anti-pattern. — georgeawg, Jun 17 '19 at 15:38
The `ng-click` attribute is a core AngularJS directive. Using that attribute name for an expression binding creates confusion as it does not act the same as the core ng-click directive. — georgeawg, Jun 17 '19 at 16:34
Please include the HTML for the "yes" and "no" buttons. It is difficult to answer a question about buggy buttons when *the question does not include the buggy buttons.** — georgeawg, Jun 17 '19 at 16:40

score 0 · Answer 1 · edited Jun 17 '19 at 16:30

You're attempting to use two usage methods at once time. There are two (probably more) that you can use the $uibModal, but here are the two that I believe you're intermixing:

1) Service controls the modal and returns a promise, I believe this is what I think you're doing. You do not need to call close/dismiss manually in this instance. You can make the following changes:

service.open = function(text, onOK) {
    var modalInstance = $uibModal.open({
        templateUrl: 'modules/confirmation-box/confirmation-box.html',
        controller: 'userListCtrl',
        resolve: {
            text: function () {
                return text;
            }
        }
    });

    // Return so you can chain .then just in case.  Generally we don't even 
    // do this, we just return the instance itself and allow the controller to
    // decide how to handle results/rejections
    return modalInstance.result;
}

In your template file you'd have something like:

<button type="button" ng-click="$close(selectedItem)"></button>
<button type="button" ng-click="$dismiss(readon)"></button>

2) If you want to use the close method directly, then you only need to change the service to:

...
return $uibModal.open({});

then in your controller:

var modal = service.open('confirm');
modal.result.then(...)
modal.close()

Edit - updated with change to op to remove the antipattern as per georgeawg suggestion.

[Callbacks from `.then` methods](https://stackoverflow.com/questions/35660881/why-are-callbacks-from-promise-then-methods-an-anti-pattern) is an anti-pattern. — georgeawg, Jun 17 '19 at 15:38
Agreed. Hence the comment saying that the result should be returned instead of onOk being called in the service. I didn't want to change too much of the op. — kendavidson, Jun 17 '19 at 15:56

bootstrap modal not close angular js

1 Answers1