AngularJS和ui-bootstrap注入錯誤（？）

Question

如果這個錯誤有點簡單，請原諒我，但是我似乎遇到了這些注入錯誤，firefox中的調試器似乎對我沒有幫助。 這里的代碼片段

這是有問題的控制器文件

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;
             }
         });
     }
 }]);

在我要求ui-bootstrap的app.js文件中：

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

在我看來，這看起來不錯。 這包括我項目的大部分路由。

AppetizersController的視圖僅顯示模式片段：

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

哪個應該轉到modal.html並打開此處列出的內容

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

抱歉，如果我沒有發布足夠的代碼，我可以使模態正常工作，但是當我嘗試使用$ modal.open時，它會返回注射器錯誤。 我注射有誤嗎？ 我查了一下這個問題，似乎遵循了ui-bootstrap文檔中的規則。 我想念什么嗎？ 我對angularjs / ui-bootstrap很陌生。

錯誤我得到：

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

注入中有一個錯誤：

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', '顛倒了。

Answer 2

您的決心應該是：

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

在您的控制器中，您聲明了menuAppetizers依賴項，但在您的解決方案中，您沒有聲明menuAppetizers對象，而是聲明了一個函數，這就是它不起作用的原因。