CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui-bootstrap
heliotrope
heliotrope

Reputation: 349

Angular $injector:unpr with uibModal

The code is almost straight from the ui-bootstrap tutorial. I have a button on my homepage with an ng-click for opening the modal window, but the error I receive in dev tools is :

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- modalController

and each click after this adds a modalController to the error message, like

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- modalController <- modalController

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- modalController <- modalController <- modalController

home.js

'use strict';

angular.module('myApp')
  .controller('homeCtrl', ['$q', '$state', '$timeout', '$scope', '$http', '$filter',
  '$uibModal', function($q, $state, $timeout, $scope, $http, $filter, $uibModal){

$scope.open = function (size){
  var modalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'app/main/searchModal.html',
    controller: 'modalController',
    size: size,
    resolve: {
      items: function () {
        return $scope.items;
      }
    }
  });

  modalInstance.result.then(function (selectedItem) {
    $scope.selected = selectedItem;
    }, function () {
  });
};
...

modalcontroller.js

'use strict';

angular.module('myApp')
.controller('modalController', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) {
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
  $uibModalInstance.close();
}]);

Upvotes: 4

Views: 1471

Answers (2)

icfantv
icfantv

Reputation: 4643

The problem is on our (the library's) end. When we released 0.14.0 and added all the uib prefixes, we missed adding it to modalInstance. The issue was fixed in 0.14.3.

To fix this issue in 0.14.0 - 0.14.2 simply use $modalInstance instead and note that when you upgrade to 1.0, you'll need to change to $uibModalInstance or the code will barf again.

Here's a link to the relevant issue on GitHub.

Upvotes: 1

Rob J
Rob J

Reputation: 6629

Everything looks correct. Another thing to check is to make sure the angular-ui-bootstrap library is getting injected in your application dependencies:

angular.module('myApp', ['ui.bootstrap'])

And that you are using the version of angular-ui-bootstrap that has the prefix changes. Version 0.14.0 introduced the 'uib' prefixes, Version 1.0.0 removed support for un-prefixed components. Prior to version 0.14.0 the $uibModalInstance was $modalInstance.

Upvotes: 1

Related Questions