未知提供者：$ 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

回答

相关问题