Question

我有$ modal依赖，所以我不确定为什么我收到这个错误。当我进入下面的以下html页面时，它会被触发。有任何想法吗？未知提供者：$ modalProvider＆lt; - $ modal＆lt; - 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',
             });

    };

});

Answer 1

当您将引导程序版本升级到最新2.0.2版本时，您应该在每个指令和服务名称之前使用uib前缀。

就像这里一样$uibModal＆amp; $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) {

Answer 2

有时缩小可以使用变量名称，因此建议通过字符串名称注入，如下所示：

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

未知提供者：$ modalProvider＆lt; - $ modal＆lt; - RecipeController

2 个答案: