user6680 user6680 - 3 months ago 25
AngularJS Question

Unknown provider: $modalProvider <- $modal <- RecipeController

I have the $modal dependency so i'm not sure why I'm getting this error. It's being triggered when I go the the following html page below. Any ideas?
Unknown provider: $modalProvider <- $modal <- RecipeController

It doesn't throw the error in my jsfiddle
http://jsfiddle.net/8s9ss/204/

chicken-recipes.html

<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
<title></title>
</head>
<body>

<div ng-controller="RecipeController">
<div ng-repeat="recipe in ChickenRecipes">
<button class="btn btn-default" ng-click="open(recipe)">{{ recipe.name }}</button> <br />
</div>
</div>

<!--MODAL WINDOW-->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Recipe: {{ recipe.name }}</h3>
</div>
<div class="modal-body">
Recipe Content<br />

{{ recipe.cookTime }}
{{recipe.directions}}
</div>
<div class="modal-footer">

</div>
</script>
</div>


</body>
</html>


app.js

var app = angular.module('RecipeSite', ['ngRoute', 'ui.bootstrap']);

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/chicken-recipes.html', {
templateUrl: 'chicken-recipes.html'
})
.when('/beef-recipes.html', {
templateUrl:'beef-recipes.html'
})
.when('/fish-recipes.html', {
templateUrl: 'fish-recipes.html'
})


$locationProvider.html5Mode({
enabled:true,
requireBase:false
});

}]); <!--end config-->


app.controller('RecipeModalController', function($scope, $modalInstance, $modal, item){
$scope.recipe = item;
console.log(item);
});

app.controller('RecipeController', function($scope, $timeout, $modal, $log) {
q
$scope.ChickenRecipes = [
{
name: "Chicken Parmesan",
cookTime: "20 mins",
image: "chicken.jpg",
directions: "First cook it",
ingredients: "1. chicken \n2. sauce \n3. cheese"
},
{
name: "Chicken Fettuchini",
cookTime: "20 mins",
image: 'chickenf.jpg',
directions: 'First cook it',
ingredients:"1. chicken \n2. sauce \n3. Fettuchini \n4.Pasta"
},
{
name: "Chicken and Rice",
cookTime: "30 mins",
image: 'chickenandrice.jpg',
directions: 'Recipe 3 instructions',
ingredients:"1. chicken \n2. sauce \n3. rice"
}
];

// MODAL WINDOW
$scope.open = function (recipe) {

var modalInstance = $uimodal.open({
controller: 'RecipeModalController',
resolve: {item: function() {return recipe} },
templateUrl: 'myModalContent.html',
});

};

});

Answer

As you are upgraded your bootstrap version to latest 2.0.2 version, you should be using uib prefix before each directive and service name.

Like here it would be $uibModal & $uibModalInstance

I'd say better always look at the ui-bootstrap ChangeLog provided there on github page, whenever upgrading a version of plugin.

Also there is case where you have $uimodal.open which seems wrong, because you have injected service is different that what you are using.

app.controller('RecipeModalController', function($scope, $uibModalInstance, $uibModal, item){
  $scope.recipe = item;
  console.log(item);
});

app.controller('RecipeController', function($scope, $timeout, $uibModal, $log) {
Comments