Неизвестный поставщик: $ modalProvider <- $ modal <- RecipeController

У меня есть модальная зависимость, поэтому я не уверен, почему я получаю эту ошибку. Это срабатывает, когда я перехожу на следующую страницу html ниже. Есть идеи? Неизвестный поставщик: $ modalProvider < - $ модальный < - RecipeController

Он не бросает ошибку в моем jsfiddle http://jsfiddle.net/8s9ss/204/

курица 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', 
      }); 

    }; 

});

источник

2016-08-16 user6680

Как вы обновили версию своего бутстрапа до l atest 2.0.2, вы должны использовать префикс uib перед каждой директивой и именем службы.

Как здесь был бы $uibModal & $uibModalInstance

Я бы сказал, что лучше всегда смотреть на ui-bootstrap ChangeLog, представленный там на GitHub странице, когда обновляет версию плагина.

Также есть случай, когда у вас есть $uimodal.open, который кажется неправильным, потому что у вас введенный сервис отличается тем, что вы используете.

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

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

источник

2016-08-16 20:30:24

Спасибо за разъяснение этого. Я понятия не имел. Он работает сейчас. Я заберу чек в течение 7 минут, когда это позволит мне – user6680

Иногда минификация может ввернуть с именами переменных поэтому рекомендуется вводить через строковые имена, как так:

app.controller('RecipeController', 
    ['$scope','$timeout','$modal','$log', 
     function($scope, $timeout, $modal, $log) { 
    ... 
}]);

источник

2016-08-16 20:32:38 Chris

Неизвестный поставщик: $ modalProvider <- $ modal <- RecipeController

ответ

Смежные вопросы