未知提供者：$ 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如果使用2.0.2版本，則應在每個指令和服務名稱前使用uib前綴。

喜歡這裏將是$uibModal & $uibModalInstance

我說還好總是看GitHub的頁面上提供有該ui-bootstrap ChangeLog，每當升級版本的插件。

還有一種情況，你有$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

回答

相關問題