current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite
1

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()
share|improve this question
    
can you tell me that where have added ui-bootstrap js. I think there was sequence break – Shohel Nov 2 '15 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 Nov 2 '15 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 Nov 2 '15 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 Nov 2 '15 at 9:28
    
Do you have menuAppetizers service/factory/provider? Cause that seems to be missing – ThisIsMarkSantiago Nov 2 '15 at 9:29
up vote 1 down vote

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.

share|improve this answer
    
$location, ParseService are placed mis but $uibModal is still right now – Shohel Nov 2 '15 at 8:43
up vote 1 down vote

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.

share|improve this answer
    
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. – Leruce Nov 2 '15 at 10:35
    
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. – ThisIsMarkSantiago Nov 2 '15 at 10:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.