Unknown provider: $modalInstance when accessing modal from stateprovider

1
votes

I have a common confirmation modal service, already created and used in another modal - Create User. In Create User controller, I call the below onModalCancel to close the Create User modal when user clicks on Cancel of the confirmation modal

vm.onModalCancel = function onModalCancel() {
        return ConfirmationModalService.openModal({
                modalTitle: vm.resourceIdFor.cancelThisUpload
            })
            .then(function (modalResponse) {
                if (modalResponse.isConfirmed()) {
                    $modalInstance.dismiss('cancel');
                    return;
                }
                return;
            });
    };

Now I am trying to open the modal from the stateprovider route when user uses the /new-user url, as below 

(function () {
'use strict';

angular
    .module('mo.pages.new-user.layouts', ['ui.router', 'ui.bootstrap'])
    .config(['$stateProvider', newUserRouteConfiguration]);

function newUserRouteConfiguration($stateProvider, $modalInstance) {
    $stateProvider
        .state('new-user', {
            url: '/new-user/{objectType:int}/{objectId:int}',
            templateUrl: 'modules/pages/shared/modals/new-user/new-user-modal.html',
            controller: 'mo.pages.shared.modals.NewUserModalController as vm',              
            windowClass: 'new-user-modal',
            resolve: {
                headerText: function () {
                    return 'header';
                }
            }
        });
}})();

The issue, i am facing is that, I get the error - Unknown provider: $modalInstanceProvider <- $modalInstance <- mo.pages.shared.modals.NewUserModalController. I know there is the dependency of $modalInstance in the NewUserModalController and i tried to resolve that by passing a $modalInstance, but still getting this error! The NewUserModalController defination is as below :

(function () {
'use strict';

angular
    .module('mo.pages.shared.modals')
    .controller('mo.pages.shared.modals.NewUserModalController', NewUserModalController);

NewUserModalController.$inject = [
    'headerText', '$window', '$q', '$modalInstance', 'mo.common.ConfirmationModalService'
];

function NewUserModalController(headerText, $window, $q, $modalInstance, ConfirmationModalService) {

/* Logic */

}})();

The modal opens without an issue, if I try to open the modal from the controller directly using the $modal.open and passing the template. It is giving the issue when I try to open the modal using the stateprovider

2
angularjsangular-ui-router
Show your code for the definition of NewUserModalController You may have forgotten the $modalInstance provider – Ron Brogan
@RonBrogan I have already added the $modalInstance in the defination of the 'NewUserModalController'. I have edited my question above with the defination of the controller. – user1722043
What version of ui-bootstrap are you using? They recently changed to prefixing things with uib, could that be what's going on? It'd be $uibModalInstance. If not, could you create a plunkr (or similar) demonstrating your problem? – Ron Brogan
@RonBrogan we are using angular-bootstrap v0.13.4 and not upgraded. The whole application uses the old instance of $modalInstance I verified that the first thing, when i got this error. – user1722043

2 Answers

0
votes

Please write

 .config(['$stateProvider','$modalInstance', newUserRouteConfiguration]);

or

 .config(newUserRouteConfiguration);

Then you don't have problems with injection

0
votes

I resolved this issue, by creating a service NewUserModalService for the modal, hence removed the $modalInstance dependency from the NewUserModalController and added the NewUserModalService dependency and instead of using templateUrl and controller in the RouteConfiguration, I used the OnEnter function. refer : [https://github.com/angular-ui/ui-router/wiki/][1]Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state NewUserModalService

(function () {

'use strict';

angular
    .module('mo.pages.shared.services')
    .factory('mo.pages.shared.services.NewUserModalService', newUserModalServiceFactory);

newUserModalServiceFactory.$inject = [
    '$modal'
];
function newUserModalServiceFactory($modal) {
    var modalInstance;
    var service = {
        shownewUserModal: shownewUserModal
    };

    return service;

    function dismissNewUserModal() {
        try {
            if (!modalInstance) {
                return;
            }
            modalInstance.close();
            $modal.close();
        } catch (e) {
        }
    }

    function showNewUserModal(headerText) {
        modalInstance = $modal.open({
            templateUrl: 'modules/pages/shared/modals/new-user/new-user-modal.html',
            controller: 'mo.pages.shared.modals.NewUserModalController as vm',
            windowClass: windowClass,
            backdrop: 'static',
            size: 'lg',
            resolve: {
                dismissFn: function () {
                    return dismissNewUserModal;
                },
                headerText: function () {
                    return headerText;
                }
            }
        });

        return modalInstance;
    }

}

})();