$uibModalInstance is not defined

uibmodalinstance dismiss
unknown provider: $uibmodalinstanceprovider <- $uibmodalinstance

I am working bootstrap modal directive . I need to open modal popup on ajax error method and popup is showing fine. but on button click inside modal , Where i need to dismiss modal , I am getting error

$uibModalInstance is not defined

First on module , I have registered correctly

var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);

then on angular controller , I have injected this directive correctly.

var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)

then I am calling this modal by following code inside same controller

var onError = function (reason) {
        $scope.modalOptions.headerText = "Error";
        $scope.modalOptions.bodyText = reason.statusText;

        $uibModal.open({
            templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
            controller: 'loginController',
            scope: $scope
        });
    };

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

Now as you can see I have created separate html file for modal and below is html

<div class="modal-header">
  <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
  <p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
 <input type="button" class="btn btn-default" value="Close"
            ng-click="cancelForm()" />
</div>

Now When I click close button I am getting error

ReferenceError: $uibModalInstance is not defined
    at Scope.$scope.cancelForm (loginController.js:44)

Now I have gone though some different solution for same problem Eg : http://plnkr.co/edit/6djuhA8ohMkrWW7zohg1?p=preview

But in this case above example is using two different controller but in my case I am using same controller ,and If i inject both $uibModal as well as $uibModalInstance then its not working

Yes uibModalInstance will be undefined. You need to store the reference of your uibmodel and call close on that reference. Like this :

var myModel = $uibModal.open({
        templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
        controller: 'loginController',
        scope: $scope
    });

and in close function:

 $scope.cancelForm = function () {
    myModel.close();
};

$uibModalInstance undefined (AngularJS UI.Bootstrap) · Issue , $uibModalInstance undefined (AngularJS UI.Bootstrap) #4920. Closed. jasonbrandt42 opened this issue on Nov 17, 2015 · 3 comments. Closed  Fix your array syntax to load dependencies (they are not in sync with controller parameters) Fix the controller that you're using for the modal. With that, you can see that it works.

You need to injected $uibModalInstance in your Controller as follows

var loginController = function ($scope, $window, $routeParams, $uibModal, DataService,$uibModalInstance)

$uibModal is not defined · Issue #4603 · angular-ui/bootstrap · GitHub, I'm getting an $uibModal is not defined In my app.js file: angular.module('myApp', $scope and $uibModalInstance aren't recognized there. Unfortunately, if you think you have found a bug and do not follow the above instructions within a reasonable amount of time, we will close the issue due to lack of activity. Please try against a build from master as we have removed all deprecated code in the 1.0 SNAPSHOT release.

In your Controller from where you are opening modal, you need to inject the dependency $uibModal. To open the modal you need to specify a html template, controller for the modal.

$scope.ErrorModal = function(index) {
      var modalInstance = $uibModal.open({
        animation: true,
        backdrop: 'static',
        templateUrl: "/PopUpErrorMessage.html",
        controller: "popupErrorMsgController",
        controllerAs: "PEMCtrl",
        size: "md",
        resolve: {
          modalInstanceData: {
            headerText: "Error",
bodyText:reason.statusText
          }
        }
      });
      modalInstance.result.then(function(receivedObject) {
        //Modal closed
      });

Now in your Modal Controller -popupErrorMsgController you can access the modal instance by injecting $uibModalInstance. Also you can inject the other parameters which you want to resolve in your modal controller

       angular.module('yourApp')
            .controller('popupErrorMsgController', popupErrorMsgController);.
    popupErrorMsgController.$inject = ['$scope', '$uibModalInstance', 'modalInstanceData'];
        function popupErrorMsgController($scope, $uibModalInstance, modalInstanceData) {

$scope.modalInstanceData = modalInstanceData;
$scope.cancelForm = function(){
var objectToSend = {};
$uibModalInstance.close(objectToSend);
}
    }

In your modal controller you can assign the received parameters to the $scope of modal and access it inside your modal HTML template.

<h3>{{modalInstanceData.headerText}}</h3>

Hope this works for you!

Injecting uibModalInstance to a controller that is not always invoked , querySelector('.modal-demo ' + parentSelector)) : undefined; var modalInstance Please note that the close and dismiss bindings are from $uibModalInstance. Even after using the latest version I get the following message in the console.

http://angular-ui.github.io/bootstrap/, Unknown provider: $uibModalInstanceProvider <- $uibModalInstance The above code will fail with $injector:unpr if myService is not defined. Making sure  Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Error: $injector:unpr Unknown Provider, The problem remains: the modal still stays on the screen and an error is thrown that $uibModalInstance is undefined. This makes sense since I removed it as a  @jasonbrandt42 please do not use the issues forum for support related-requests. The issues forum is reserved for bugs (as is documented here. Thanks. I do see your Stack Overflow and that's one of the proper ways to ask for help, but cross-posting here is not.

Angular UI Bootstrap Modal: [$injector:unpr] Unknown provider , The approach is working for $uibModal but not for $uibModalInstance. It is because the provider for modalInstance are not defined. Thus, end up as following  Uncaught TypeError: $(…).code is not a function (Summernote) knitr kable and “*” Monitor incoming IP connections in Amazon AWS; Scala Class body or primary constructor body

Comments
  • If i add $uibModalInstance then I am getting message 'Unknown provider: $uibModalInstanceProvider <- $uibModalInstance'
  • $uibModalInstance is avaialble in bootstarp version (0.14.3).As per my perception you might be not using bootstrap version(0.14.3).