AngularJS和ui-bootstrap注入错误（？）

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()

Answer 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.

Answer 2

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.