$injector error when using angular-bootstrap ($modalInstanceProvider <- $modalInstance)

Question

I've been playing around with this bug but I can't seem to figure it out. The problem started when I pushed the angular-bootstrap models I had added to the prod server. The original error was this:

"AngularJS Error: Unknown provider: aProvider <- a"

I'm pretty sure I was getting that error because my files weren't minifying correctly. So I went through my controllers and found that I wasn't $injecting $modal instance into my controllers and that's when I ran into this problem.

Whenever I inject $modalInstance into my controller in the minified format I get this error. I am not using the format angular-bootstrap suggests because I have a lot going on and many controllers on the site I'm building so I combined everything into one controller instead of several functions.

My Controller:

.controller('CreateGroupCtrl', ['$scope', '$http', '$window', '$cookies', '$modal', '$log', 'FeedService', '$modalInstance', 
function CreateGroupCtrl($scope, $http, $window, $cookies, $modal, $log, $modalInstance, FeedService) {
$scope.createGroupCall = function createGroupCall(teacher, name) {
    if(teacher != null && name != null) {
            FeedService.createGroupCall($cookies.token, $window.sessionStorage.user, teacher, name).success(function(data) {
            console.log('GroupCreated');
        }).error (function(status,data,token) {
            console.log(status);
            console.log(data);
        });
    } else {
        alert("Error!");
    }
}

/***********ANGULAR-UI MODAL CODE**********/
$scope.open = function (size) {
    var modalInstance = $modal.open({
        templateUrl: 'CreateGroupContent.html',
        controller: CreateGroupCtrl,
        size: size
});

modalInstance.result.then(function (selectedItem) {
    $scope.selected = selectedItem;
}, function () {
    $log.info('Modal dismissed at: ' + new Date());
    });
};

$scope.ok = function () {
    $modalInstance.close();
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

}]);

My Template:

<button ng-controller="CreateGroupCtrl" ng-click="open()" type="button" id="creategroup" class="btn ns-btn">
        <img class="ns-add" src="images/createGroup.png">
        <p class="create">Create Group</p>
</button>

<div>
    <script type="text/ng-template" id="CreateGroupContent.html">
        <div class="modal-header">
                <h2 class="modal-title ns-modal-title">Create A Group</h2>
                <button class="ns-modal-close" ng-click="cancel()"><img src="images/xCancel.png"></button>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <input type="text" class="form-control ns-modal-form" placeholder="Teacher" ng-model="create.teacher" required autofocus>
                    <input type="text" class="form-control ns-modal-form" placeholder="Group Name" ng-model="create.name" required>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn ns-modal-add ns-btn" ng-click="createGroupCall(create.teacher, create.name); ok();" type="submit">Create</button>
            </div>
        </div>
    </script>
</div>

In the pasted example 'FeedService', '$modalInstance' are flipped, when you compare dependencies and constructor. Was that a typo in the question? — PSL
– PSL, Commented Sep 4, 2014 at 2:02
no, thats how i had it but i fixed it still gives me an error. — Saleh
– Saleh, Commented Sep 4, 2014 at 6:33

ababashka · Accepted Answer · 2014-09-04 16:02:01Z

5

At first, you need to inject all in its order.

Also, you should inject $modal into the controller in which you would like to create your modal view. And the $modalInstance can be injected ONLY into the controller which is used for this $modal window. In your case you use the same controller, so you couldn't inject $modalInstance

Demo: http://plnkr.co/edit/khzNQ0?p=preview

Also, in your case (when you use only 1 controller) - you can pass as object field scope which will be used as parent of $scope for your modal view. By default it is $rootScope, but you can type:

$scope.open = function (size) {
    var modalInstance = $modal.open({
        templateUrl: 'CreateGroupContent.html',
        controller: CreateGroupCtrl,
        size: size,
        scope: $scope
});

So now your functions ok() and cancel() will be available in your modal view and modal scope.

edited Sep 4, 2014 at 16:02

answered Sep 4, 2014 at 15:46

ababashka

2,1011 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Antiga · Accepted Answer · 2014-09-04 02:08:23Z

0

Looks like your FeedService and $modalInstance are mixed up. They need to be in the same order.

edited Sep 4, 2014 at 2:08

answered Sep 4, 2014 at 2:03

Antiga

2,2741 gold badge20 silver badges28 bronze badges

1 Comment

Saleh Over a year ago

i put them in the right order still gives me an error.

Collectives™ on Stack Overflow

$injector error when using angular-bootstrap ($modalInstanceProvider <- $modalInstance)

2 Answers 2

Demo: http://plnkr.co/edit/khzNQ0?p=preview

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo: http://plnkr.co/edit/khzNQ0?p=preview

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related