Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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
add comment

1 Answer

up vote 0 down vote

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
 
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 at 20:28
 
@m.e.conroy thanks! will def bookmark that –  Yashua Nov 18 at 23:47
 
sure, hope it helps. If nothing else maybe to just look at the code to get ideas. –  m.e.conroy Nov 19 at 14:10
add comment

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.