Unknown provider: $modalInstanceProvider <- $modalInstance
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 }
thanks. i met some problem when i injected with "$modalInstance". Now i changed it to $uibModalInstance and remove ng-controller in my modal template. It worked!
When i was having problem, my code like below:
//======================navController=============================app.controller('navController', function($http, $scope, $uibModal, $rootScope, $location) { $scope.loginDialog = function() { var modalInstance = $uibModal.open({ templateUrl: 'views/login.html', controller: 'loginController', }) };});//======================loginController=============================app.controller('loginController', function($http, $scope, $modalInstance, $rootScope, $location) { $scope.closeLogin = function() { $modalInstance.dismiss('cancel'); } //http://angular-ui.github.io/bootstrap/#/modal $scope.submit = function() { console.log("input user = >" + JSON.stringify($scope.user)) $http({ method: 'POST', url: '/auth/login', data: $scope.user }).then(function successCallback(response) { console.log(response) console.log(response.data.message) console.log(response.data.state) console.log(response.data.user) if (response.data.user === null) { $rootScope.isAuthenticated = false; $modalInstance.dismiss('cancel') } else { $rootScope.isAuthenticated = true; $modalInstance.dismiss('cancel') } }, function errorCallback(err) { console.log(err) $modalInstance.dismiss('cancel') $location.path('/error') }); }});<form class="form-signin" id="loginForm" ng-model="user" ng-controller="loginController"> <div style="margin:5px"> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="user.username" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="user.password" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" ng-click="submit()">Sign in</button> <button class="btn btn-lg btn-primary btn-block" ng-click="closeLogin()">Cancel</button> </div></form><!-- /container --><script>$.validator.setDefaults({ submitHandler: function() { alert('start signing...') }});$().ready(function() { $("#loginForm").validate();});</script>
Then i changed it to as below:
//======================navController=============================app.controller('navController', function($http, $scope, $uibModal, $rootScope, $location) { $scope.loginDialog = function() { var modalInstance = $uibModal.open({ templateUrl: 'views/login.html', controller: 'loginController', }) };});//======================loginController=============================app.controller('loginController', function($http, $scope, $uibModalInstance, $rootScope, $location) { $scope.closeLogin = function() { $uibModalInstance.dismiss('cancel'); } //http://angular-ui.github.io/bootstrap/#/modal $scope.submit = function() { console.log("input user = >" + JSON.stringify($scope.user)) $http({ method: 'POST', url: '/auth/login', data: $scope.user }).then(function successCallback(response) { console.log(response) console.log(response.data.message) console.log(response.data.state) console.log(response.data.user) if (response.data.user === null) { $rootScope.isAuthenticated = false; $uibModalInstance.dismiss('cancel') } else { $rootScope.isAuthenticated = true; $uibModalInstance.dismiss('cancel') } }, function errorCallback(err) { console.log(err) $uibModalInstance.dismiss('cancel') $location.path('/error') }); }});<form class="form-signin" id="loginForm" ng-model="user"> <div style="margin:5px"> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="user.username" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="user.password" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" ng-click="submit()">Sign in</button> <button class="btn btn-lg btn-primary btn-block" ng-click="closeLogin()">Cancel</button> </div></form><!-- /container --><script>$.validator.setDefaults({ submitHandler: function() { alert('start signing in...') }});$().ready(function() { $("#loginForm").validate();});</script>
removing 'ng-controller' in modal template and use $uiModalInstance fixed my problem.