问题描述:

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

});

};

});

网友答案:

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) {
网友答案:

Sometimes minification can screw with the names of variables so it is advised to inject via string names like so:

app.controller('RecipeController', 
    ['$scope','$timeout','$modal','$log',
      function($scope, $timeout, $modal, $log) {
     ...
}]);
相关阅读:
Top