naveen naveen - 4 months ago 22
AngularJS Question

Unknown provider: $modalInstanceProvider <- $modalInstance

I am trying to call a modal using angularui-bootstrap like this.

var authApp = angular.module('AuthApp', ['ui.bootstrap']);
authApp.controller('AuthController',
['$scope', '$uibModal',
function ($scope, $uibModal) {
//$scope.credentials = {
// userName: "",
// uPassword: "",
// rememberMe: ""
//};
$scope.OpenLoginModal = function (templateUrl) {
var modalInstance = $uibModal.open({
animation: false,
backdrop: 'static',
templateUrl: templateUrl,
controller: 'loginModalController'//,
//resolve: {
// credentials: function () {
// return $scope.credentials;
// }
//}
});
};
}]);

authApp.controller('loginModalController',
['$scope', '$modalInstance', 'AuthService',
function ($scope, $modalInstance, AuthService) {
//$scope.credentials = credentials;
//$scope.headerTitle = 'Login Information';

$scope.LoginUser = function () {
//var data = {};
//console.log($scope.credentials);
AuthService.ValidateServerAccessDetails(data).then(function (response) {
//$modalInstance.close(response.data);
}, function (response) {
//$scope.userName = "";
//$scope.passWord = "";
});
};

$scope.CancelLogin = function () {
$modalInstance.dismiss('cancel');
};
}]);


And I am getting this error,


Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- loginModalController


I am also getting the same error in Plunker: https://plnkr.co/edit/3rmapgrLhYJ3plyPWm87

What am I doing wrong?
Versions used are angularjs-1.4.7 and angularui-1.1.2

P.S: I checked many answers here. One of the question that came close was this one. Unknown provider: $modalInstanceProvider <- $modalInstance in Angularjs modal

Answer

Try changing the dependency to $uibModalInstance as used in the example in the documentation. Your controller would look like:

authApp.controller('loginModalController', [
    '$scope', '$uibModalInstance', 'AuthService',
     function ($scope, $uibModalInstance, AuthService) {
        // implementation
    }