AngularJS and ui-bootstrap injection error(?)

Question

Forgive me if this error is somewhat simple, but i seem to be getting these injection error and the debugger in firefox doesn't seem to help me. Here the code snippets

This is the Controller file in question

App.controller('ModalInstanceCtrl', function ($scope,$uibModal, menuAppetizers) {
$scope.menuAppetizers; });

App.controller('AppetizerMenuController',
     ['$rootScope', '$scope', '$http', 'ParseService', '$location', '$q', '$uibModal',
     function ($rootScope, $scope, $http, $location, ParseService, $q, $uibModal) {
       //.... needless code not related to the problem

       $scope.open = function (_menuAppetizer) {
         console.log("We get into the modal open");
         var modalInstance = $uibModal.open({
             controller: 'ModalInstanceCtrl',
             templateUrl: "Views/menu/myModal.html",
             resolve: function () {
                 return _menuAppetizer;
             }
         });
     }
 }]);

in the app.js file where i call for ui-bootstrap:

var App = angular.module('App',
 ['ngRoute', "ui.bootstrap"])

Which seem to look fine to me. This consist most of the routing for my project.

The view for the AppetizersController which only show the modal snippet:

<button type="button" class="btn btn-default btn-sm" ng-click="open(menuAppetizers)"
   data-toggle="modal" data-target="#myModal.html">Nutrition Info</button>

Which should go to the modal.html and open that content which is listed here

<div class="modal fade" id="myModal.html" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Nutrition Info</h4>
        </div>
        <div class="modal-body">
            <p>Calories: {{menuAppetizers.NutritionInfo}}</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Sorry if i didn't post enough code, I can get the modal to work, but when i try to use $modal.open it return a injector error. Did i make a mistake injecting? I looked up this problem and i seem to be following the rules i got from the documentation from ui-bootstrap. Am I missing something? I'm pretty new to angularjs/ui-bootstrap.

Error I get:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.7/$injector/unpr?p0=menuAppetizersProvider%20%3C-%20menuAppetizers%20%3C-%20ModalInstanceCtrl

 e/<() angular.min.js:107
 Ze/this.$get</<() angular.min.js:80
 f/<() angular.min.js:119
 lf/this.$get</n.prototype.$eval() angular.min.js:133
lf/this.$get</n.prototype.$digest() angular.min.js:130
lf/this.$get</n.prototype.$apply() angular.min.js:133
 h() angular.min.js:87
 K() angular.min.js:91
 Sf/</z.onload()

can you tell me that where have added ui-bootstrap js. I think there was sequence break — Shohel
– Shohel, Commented Nov 2, 2015 at 8:44
It added into the index file where all the other scripts should be. from the debugger in firefox, the error seem to be located into ModalInstanceCtrl. If I'm reading it right. Just no clue how to resolve it. — Leruce
– Leruce, Commented Nov 2, 2015 at 8:51
can you attach the error stack trace at the bottom of your question? "ModalInstanceCtrl" seems not needing any $uibModal injection because there is no logic inside and there is no scope isolation. Is AppetizerMenuController the parent scope? — morels
– morels, Commented Nov 2, 2015 at 9:20
Alright I added in the error stack and the error i see. and yes, the ModalInstanceCtrl is the child of a AppetizerMenuController — Leruce
– Leruce, Commented Nov 2, 2015 at 9:28
Do you have menuAppetizers service/factory/provider? Cause that seems to be missing — Mark Santiago
– Mark Santiago, Commented Nov 2, 2015 at 9:29

morels · Accepted Answer · 2015-11-02 08:16:57Z

1

There is a mistake in the injection:

App.controller('ModalInstanceCtrl', ['$scope', '$uibModal', 'menuAppetizers',function ($scope,$uibModal, menuAppetizers) {
$scope.menuAppetizers; }]);

App.controller('AppetizerMenuController',
     ['$rootScope', '$scope', '$http', '$location', 'ParseService', '$q', '$uibModal',
     function ($rootScope, $scope, $http, $location, ParseService, $q, $uibModal) {
.... needless code not related to the problem

'ParseService', '$location', ' where inverted.

answered Nov 2, 2015 at 8:16

morels

2,11520 silver badges24 bronze badges

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

1 Comment

Shohel Over a year ago

$location, ParseService are placed mis but $uibModal is still right now

Mark Santiago · Accepted Answer · 2015-11-03 04:52:18Z

1

Your resolve should be:

resolve: {
    menuAppetizers: function () {
        return _menuAppetizer;
    }
}

In your controller, you declared a menuAppetizers dependency, but in your resolve, you did not declare a menuAppetizers object instead you declared a function, that's why it is not working.

edited Nov 3, 2015 at 4:52

answered Nov 2, 2015 at 10:28

Mark Santiago

4633 silver badges9 bronze badges

2 Comments

Leruce Over a year ago

Why does that work? Well it working as in it reach that part now via console.log. I think I broke the modal content part myself. So I should be able to fix that part after thinking about it. Many Thank.

Mark Santiago Over a year ago

In your controller, you declared a menuAppetizers dependency, but in your resolve, you did not declare a menuAppetizers object instead you declared a function, that's why it is not working.

Collectives™ on Stack Overflow

AngularJS and ui-bootstrap injection error(?)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related