Angularjs Inject Issue With Angular Bootstrap Modal

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: $modalInstanceProv

Solution 1:

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

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

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

<div><divclass="modal-header"><h3>I am a modal!</h3></div><divclass="modal-body"><ul><ling-repeat="item in items"><ang-click="selected.item = item">{{ item }}</a></li></ul>
    Selected: <b>{{ selected.item }}</b></div><divclass="modal-footer"><buttonclass="btn btn-primary"ng-click="ok()">OK</button><buttonclass="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!

Solution 2:

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