ui bootstrap modal needs two controllers

Question

I am trying to create modal window with login form using ui-bootstrap angular module.

I created two controllers but after that i realized that two controllers to one modal window is too much so i decided two merge it into one. And then i got 3 errors which i can't solve for so long, please help me.

angular.js:14239 Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- LoginModalCtrl

angular.js:14239 Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- LoginModalCtrl <- LoginModalCtrl

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- LoginModalCtrl <- LoginModalCtrl <- LoginModalCtrl

I am sure i spelled everything correctly any dependencies.

Code of two controllers which worked for me before putting them together

https://gist.github.com/anonymous/f0286abe139a02749d7b4e55d57b3fdd

And finally code of frankenstein i've created from mixing them.

app.controller('LoginModalCtrl', ['$scope', '$location', '$uibModalInstance', '$uibModal', 'authenticationService', function($scope, $uibModal, $uibModalInstance, $location, authenticationService) {
var $ctrl = this;
$ctrl.modalInstance = null;


$ctrl.animationsEnabled = true;

$ctrl.open = function(size, parentSelector) {
    var parentElem = parentSelector ?
        angular.element($document[0].querySelector('.modal-login' + parentSelector)) : undefined;

    $ctrl.modalInstance = $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: 'modal-header',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'loginModalContent.html',
        backdropClass: "modal-backdrop",
        size: size,
        backdrop: true,
        appendTo: parentElem,

        resolve: {
            items: function() {
                return $ctrl.items;
            }
        }
    });
};

$ctrl.login = function() {
        //
        authenticationService.login($ctrl.loginData)
            .then(function(data) {

                $uibModalInstance.close();
                $location.url("/");

            }, function(error) {

            });
    };

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

Make the order of your dependencies same. Which means the array: ['$scope', ... , 'authenticationService'] and function($scope, ... , authenticationService) should have the identical order. — Prerak Sola
I changed but still got [$injector:unpr] Unknown provider :( — user7384615
I additionaly deleted '$uibModalInstance', and now it is opening and seems working but close button on right top corner and login button doesn't work. — user7384615

Pop-A-Stash Pop-A-Stash · Accepted Answer · 2017-06-19T16:36:26

This is the source of your problem:

app.controller('LoginModalCtrl', 
  ['$scope', '$location', '$uibModalInstance', '$uibModal', 'authenticationService', 
  function($scope, $uibModal, $uibModalInstance, $location, authenticationService) {
...

All providers must match the order they were injected in. It's much better, cleaner, easier to read when you use suggestions from John Papa's style guide:

app.controller('LoginModalCtrl', LoginModalCtrl);

LoginModalCtrl.$inject = [
  '$scope', '$location', 
  '$uibModalInstance', '$uibModal', 
  'authenticationService'
];
function LoginModalCtrl(
  $scope, $location,
  $uibModalInstance, $uibModal, 
  authenticationService
) {
...
}

Also, you should not be injecting both $uibModal and $uibModalInstance in the same controller. That means something is not right (unless you are trying to open a 2nd modal from within the first modal. Not common and considered bad practice).

$uibModal is injected into the controller that opens the modal.

$uibModalInstance is injected into the controller that is the modal.

It also looks like you did not specify a controller when you opened the modal:

$ctrl.modalInstance = $uibModal.open({
    ...
    controller: $ctrl.login
    ...
});

ui bootstrap modal needs two controllers

1 Answers