17

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?

sheilak
  • 5,833
  • 7
  • 34
  • 43
Marcinek
  • 173
  • 1
  • 1
  • 6

6 Answers6

21

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;
      }
    }
  });
}]);
GeorgeKach
  • 219
  • 1
  • 3
7

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

Aashish Patil
  • 71
  • 1
  • 1
3

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.

Mohamad Ghafourian
  • 1,052
  • 1
  • 14
  • 26
  • 2
    I had same problem with `angular-bootstrap`'s `0.14.1` version. I updated to `0.14.3` and now it works. – vinesh Nov 17 '15 at 18:11
3

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

nuander
  • 1,319
  • 1
  • 19
  • 33
1

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.

Jimmy
  • 428
  • 5
  • 19
1

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

Check out angular-ui/bootstrap example.

KaiserKatze
  • 1,521
  • 2
  • 20
  • 30