CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
Marcinek
Marcinek

Reputation: 173

Unknown provider: $uibModalInstanceProvider - Bootstrap UI modal

I have a problem with UI Bootstrap modal.

In one controller I have this:

app.controller("tableCtrl",['$scope','$http','$uibModal','$log' ,function ($scope, $http,$uibModal,$log) {
  $scope.open = function (size,selectedUser) {
  var modalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'myModalContent.html',
    controller:'ModalInstanceCtrl',
    size: size,
    resolve: {
      user: function () {
        return selectedUser;
      }
    }
  });
}]);

In another I have this:

app.controller('ModalInstanceCtrl',['$scope','$uibModalInstance','user', function ($scope, $uibModalInstance, user) {
  $scope.user = user;
  $scope.ok = function () {
    $uibModalInstance.close();
  };
}]);

myModalContent looks like this:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header"><h1>EDIT</h1></div>
    <div class="modal-body"> 
        {{patient.patient_id}}
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
    </div>
</script>

I only call tableCtrl in HTML and call open function like this:

<button class="btn btn-primary" ng-click="open('lg',patient)">Edit</button>

When I click the edit button I receive this exception:

Unknown provider: $uibModalInstanceProvider <- $uibModalInstance

I saw this plunker but it didnt help me.

What is wrong?

Upvotes: 17

Views: 34875

Answers (6)

KaiserKatze
KaiserKatze

Reputation: 1579

Different versions of angular-ui/boostrap have different injecter variable names.

Check out angular-ui/bootstrap example.

Upvotes: 1

nuander
nuander

Reputation: 1423

I found that this problem occurred when I defined the controller in the template HTML rather than in the modal.open call

Upvotes: 3

Aashish Patil
Aashish Patil

Reputation: 71

The Problem Identified is: My Control was reinitializing from HTML Page. Make sure the Modal controller is initalized from one place

Upvotes: 7

Jimmy
Jimmy

Reputation: 428

Having the controller function, inline and inside the uibModalInstance object definition was causing me the same issue.

After upgrading to 0.14.3, when the javascript was uglified, uibModalInstance was throwing unknown provider. Defining the controller using 'app.controller', fixed the issue.

Upvotes: 1

GeorgeKach
GeorgeKach

Reputation: 319

I had the same problem, so from my solution here's how you could solve your scenario

app.controller("tableCtrl",['$scope','$http','$uibModal','$log' ,function ($scope, $http,$uibModal,$log) {
  $scope.open = function (size,selectedUser) {
  var uibModalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'myModalContent.html',
    controller:function($uibModalInstance ,$scope,user){
     $scope.ok = function () {
            $uibModalInstance.dismiss('cancel');
         };

    },
    size: size,
    resolve: {
      user: function () {
        return selectedUser;
      }
    }
  });
}]);

Upvotes: 21

Mohamad Ghafourian
Mohamad Ghafourian

Reputation: 1081

I Had the exact same problem. updating both angular and ui-bootstap library fixed my problem. Use bower to update ui-bootstrap, it suggests the version of angular that is working with it. Hope I helped.

Upvotes: 3

Related Questions