current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 15 down vote favorite
8

I am integrating the modal from Angular Bootstrap and trying to adapt code sample from here to my app. I get the error: Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance

What do I need to do to make $modalInstance work? I see from code sample that they have written it so that it is within the scope of the function but I am not sure how to write things when chaining controllers.

angular.module('myApp', ['ui.bootstrap']).
controller('ModalInstanceCtrl', function($scope, $modalInstance) {
}).
factory('AuthService', ['$http', '$rootScope', '$modal',
  function($http, $rootScope, $modal) {
    return {
      loginModal: function(callback) {
        var modalInstance = $modal.open({
          templateUrl: '/partials/main/signin',
          controller: 'ModalInstanceCtrl'
        });
        modalInstance.result.then(function(selectedItem) {
          $scope.selected = selectedItem;
        }, function() {});
      }
    };
  }
]);
share|improve this question
up vote 37 down vote accepted

Ok - the issue was actually with my template. I had modified the partial from the sample to be:

<div ng-controller="ModalInstanceCtrl">
  <div class="modal-header">
    <h3>I am a modal!</h3>
  </div>
  <div class="modal-body">
    <ul>
      <li ng-repeat="item in items">
        <a ng-click="selected.item = item">{{ item }}</a>
      </li>
    </ul>
    Selected: <b>{{ selected.item }}</b>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</div>

While in fact I needed to remove the ng-controller reference.

<div>
  <div class="modal-header">
    <h3>I am a modal!</h3>
  </div>
  <div class="modal-body">
    <ul>
      <li ng-repeat="item in items">
        <a ng-click="selected.item = item">{{ item }}</a>
      </li>
    </ul>
    Selected: <b>{{ selected.item }}</b>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</div>

I still feel like I am stumbling around with Angular but this seemed to do the trick!

share|improve this answer
2  
if this helps at all I made a service that creates predefined modals using Angular, Angular-UI with Bootstrap 3, You can also add in your own modal partial and controller to generate a modal, here's a demo: codepen.io/m-e-conroy/pen/ALsdF you can find the code on gitHub: github.com/m-e-conroy/angular-dialog-service – m.e.conroy Nov 18 '13 at 20:28
    
@m.e.conroy thanks! will def bookmark that – Yashua Nov 18 '13 at 23:47
1  
sure, hope it helps. If nothing else maybe to just look at the code to get ideas. – m.e.conroy Nov 19 '13 at 14:10
    
Awesome work m.e.conroy! Thank you for doing that :) – ac360 Jan 24 '14 at 20:43
    
Thank you, this was driving me up the wall. – Stark May 6 '14 at 10:25
up vote 2 down vote

As shown in modal example angular ui, you don't have to specify the ng-controller element. You can specify the controller attribute when defining the modal.

    var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
            items: function () {
                return $scope.items;
            },
            dataModel: function () {
                return $scope.data;
            }
        }
    });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.