CODEWITHSUNDEEP
javascripthtmlangularjsmodal-dialogangular-ui-bootstrap
notAChance
notAChance

Reputation: 1430

Error: [$injector:unpr] Unknown provider: modalInstanceProvider <- modalInstance <- modalCtrl with the latest ui bootstrap

EDIT - as the code below is, the modal will work - my issue was I had included ng-app and ng-controller in my HTML template for my modal, however they are not included in the below question.

I've my main controller, modal controller and my modal template HTML

Everything seems to be in order and I cannot for the life of me work out (or find out from stackoverflow) why I keep getting Error: [$injector:unpr] Unknown provider: modalInstanceProvider <- modalInstance <- modalCtrl error. BTW $modal is now depricated, it's $ubiModal now.

Main ctrl:

var module = angular.module("app", ["agGrid", "ngAnimate", "ngSanitize", "ngDialog", "ui.bootstrap"])

module.controller("mainCtrl", ["$scope", "dataService", "$timeout", "dateFilter", "ngDialog", "$http", "$uibModal", function ($scope, dataService, $timeout, dateFilter, ngDialog, $http, $uibModal) {

$scope.open = function () {

    var uibModalInstance= $uibModal.open({
        templateUrl: "views/Modal.html",
        controller: "modalCtrl",
        show: true,
    })
};
}]);

my modal controller:

module.controller("modalCtrl", ["$scope", "ngDialog", "dataService", "$uibModalInstance", function ($scope, ngDialog, dataService, $uibModalInstance) {

//do stuff

}]);

and my HTML template:

 <div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" ng-click="closeThisDialog(); printArray()" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h1 class="text-center" style="text-align: center">Entities:</h1>
                </div>
                <div class="modal-body">

                    <div>
                        <div>
                            <input type="text" placeholder="Search" ng-model="entity">
                        </div>
                    </div>

                    <div ng-repeat="entity in entityArray | filter:entity">

                        <label>
                            <input style="float: left; margin-top: 5px" type="checkbox" ng-model="entityChecked" ng-change="getEntityFromModal(entity, entityChecked)" />
                            <span>{{entity}}</span>
                        </label>
                    </div>
                </div>
                <button ng-click="okButtonEntity();" >OK</button>
            </div>
        </div>
    </div>

Upvotes: 6

Views: 10481

Answers (1)

PSL
PSL

Reputation: 123739

$modalInstance has since been changed (deprecated) to $uibModalInstance with the latest ui bootstrap (0.14.3). Also it should be $modalInstance with older versions.

i.e

module.controller("modalCtrl", ["$scope", "ngDialog", "dataService", "$uibModalInstance", 
                        function ($scope, ngDialog, dataService, $uibModalInstance) {

Documentation

controller - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax in the form 'SomeCtrl as myctrl'; can be injected with $uibModalInstance

Upvotes: 10

Related Questions