I'm encountering an issue with injection errors in my code, and unfortunately, the debugger in Firefox isn't providing much help. Here are snippets of the code:
This is the Controller file causing the error:
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) {
//.... other unrelated code
$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;
}
});
}
}]);
Within the app.js file, where I call for ui-bootstrap:
var App = angular.module('App', ['ngRoute', "ui.bootstrap"])
Everything seems correct here, as this code handles most of the routing for my project.
The view for the AppetizersController, which only shows 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>
This should open the modal.html file with the following content:
<div class="modal fade" id="myModal.html" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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>
Despite trying to make the modal work, when using $modal.open, I encounter an injector error. Could I have made a mistake in the injection process? I've followed the documentation for ui-bootstrap, but it seems I'm missing something. Any help would be appreciated as I am relatively new to AngularJS and ui-bootstrap.
Error Message:
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()