AngularJS inject issue with Angular Bootstrap modal

Question

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() {});
      }
    };
  }
]);

score 38 · Accepted Answer · answered Nov 17 '13 at 18:18

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!

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: http://codepen.io/m-e-conroy/pen/ALsdF you can find the code on gitHub: https://github.com/m-e-conroy/angular-dialog-service — m.e.conroy, Nov 18 '13 at 20:28
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

score 2 · Answer 2 · answered Oct 31 '15 at 05:00

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;
            }
        }
    });

AngularJS inject issue with Angular Bootstrap modal

2 Answers2

Linked