不明なプロバイダ：$ 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を使用する必要があります。

ここと同じように、それは私が常にgithubのページにあっui-bootstrap ChangeLogを見て、より良いと言うだろう$uibModal & $uibModalInstance

になり、プラグインのバージョンをアップグレードするたびに。

また、$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

答えて

関連する問題