添加Angular.js莫代尔给出错误：[$注射器：unpr]

Question

所以我有一个应用程序，它的工作大（MEAN堆栈），而我在<script src="/lib/ui-bootstrap-custom-1.3.3.min.js"></script>和<script src="/lib/ui-bootstrap-custom-tpls-1.3.3.min.js"></script>因此增加，我可以使用模式 。

代码将在下面，但这里有一些解释。我在我的角度应用声明中添加了angular.module('loc8rApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);。然后在控制器中，我通过locationDetailCtrl.$inject = ['$routeParams', '$modal', 'loc8rData'];正确注入。我还没有在html中的任何地方声明ng-controller，所以我不确定问题可能是什么。

最后，错误的副本：

Error: [$injector:unpr] http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20locationDetailCtrl 

下面是代码4块。前两个是locationDetail.controller.js和locationDetail.view.html，其他的是app.js（angular app.js）和index.html。

locationDetail.controller.js

(function() { 

    angular 
     .module('loc8rApp') 
     .controller('locationDetailCtrl', locationDetailCtrl); 

    locationDetailCtrl.$inject = ['$routeParams', '$modal', 'loc8rData']; 
    function locationDetailCtrl($routeParams, $modal, loc8rData) { 
     var vm = this; 
     vm.locationid = $routeParams.locationid; 

     loc8rData.locationById(vm.locationid) 
      .success(function(data) { 
       vm.data = { location: data }; 
       vm.pageHeader = { 
        title: vm.data.location.name 
       }; 
      }) 
      .error(function(e) { 
       console.log(e); 
      }); 

     vm.popupReviewForm = function() { 
      alert("Let's add a review!"); 
     }; 
    } 

})(); 

locationDetail.view.html

<navigation></navigation> 

<div class="container"> 
    <page-header content="vm.pageHeader"></page-header> 

     <div class="row"> 
      <div class="col-xs-12 col-md-9"> 
       <div class="row"> 
        <div class="col-xs-12 col-sm-6"> 
         <p class="rating" rating-stars rating="vm.data.location.rating"></p> 
         <p>{{ vm.data.location.address }}</p> 
         <div class="panel panel-primary"> 
          <div class="panel-heading"> 
           <h2 class="panel-title">Opening hours</h2> 
          </div> 
          <div class="panel-body"> 
           <p ng-repeat="time in vm.data.location.openingTimes" ng-switch on="time.closed"> 
            {{ time.days }} : 
            <span class="opening-time" ng-switch-when="true">closed</span> 
            <span class="opening-time" ng-switch-default>{{ time.opening + " - " + time.closing }}</span> 
           </p> 
          </div> 
         </div> 
         <div class="panel panel-primary"> 
          <div class="panel-heading"> 
           <h2 class="panel-title">Facilities</h2> 
          </div> 
          <div class="panel-body"> 
           <span class="label label-warning label-facility" ng-repeat="facility in vm.data.location.facilities"> 
            <span class="glyphicon glyphicon-ok"></span> 
            {{ facility }} 
           </span> 
          </div> 
         </div> 
        </div> 
        <div class="col-xs-12 col-sm-6 location-map"> 
         <div class="panel panel-primary"> 
          <div class="panel-heading"> 
           <h2 class="panel-title">Location map</h2> 
          </div> 
          <div class="panel-body"> 
           <img src="http://maps.googleapis.com/maps/api/staticmap?center={{ vm.data.location.coords[1] }},{{ vm.data.location.coords[0] }}&amp;zoom=17&amp;size=400x350&amp;sensor=false&amp;markers={{ vm.data.location.coords[1] }},{{ vm.data.location.coords[0] }}&amp;scale=2" class="img-responsive img-rounded"> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <div class="panel panel-primary review-panel"> 
          <div class="panel-heading"> 
           <a ng-click="vm.popupReviewForm()" class="btn btn-default pull-right">Add review</a> 
           <h2 class="panel-title">Customer reviews</h2> 
          </div> 
          <div class="panel-body review-container"> 
           <div class="review" ng-repeat="review in vm.data.location.reviews | orderBy:'createdOn':true"> 
            <div class="row"> 
             <div class="well well-sm review-header"> 
              <span class="rating" rating-stars rating="review.rating"></span> 
              <span class="reviewAuthor">{{ review.author }}</span> 
              <small class="reviewTimestamp">{{ review.createdOn | date : 'MMMM d yyyy' }}</small> 
             </div> 
             <div class="col-xs-12"> 
              <p ng-bind-html="review.reviewText | addHtmlLineBreaks"></p> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-xs-12 col-md-3"> 
       <p class="lead">{{ vm.data.location.name }} is on Loc8r because it has accessible wifi and space to sit down with your laptop and get some work done.</p> 
       <p>If you've been and you like it - or if you don't - please leave a review to help other people just like you.</p> 
      </div> 
     </div> 

    <footer-generic></footer-generic> 
</div> 

app.js（角app.js）。

(function() { 

    angular.module('loc8rApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']); 

    function config($routeProvider, $locationProvider) { 
     $routeProvider 
      .when('/', { 
       templateUrl: 'home/home.view.html', 
       controller: 'homeCtrl', 
       controllerAs: 'vm' 
      }) 
      .when('/about', { 
       templateUrl: '/common/views/genericText.view.html', 
       controller: 'aboutCtrl', 
       controllerAs: 'vm' 
      }) 
      .when('/location/:locationid', { 
       templateUrl: '/locationDetail/locationDetail.view.html', 
       controller: 'locationDetailCtrl', 
       controllerAs: 'vm' 
      }) 
      .otherwise({redirectTo: '/'}); 

     $locationProvider.html5Mode(true); 
    } 

    angular 
     .module('loc8rApp') 
     .config(['$routeProvider', '$locationProvider', config]); 

})(); 

index.html

<!DOCTYPE html> 
<html ng-app="loc8rApp"> 
    <head> 
     <meta name="viewport" content="width=device-width", initial-scale="1.0"> 
     <title>Loc8r</title> 
     <link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css"> 
     <link rel="stylesheet" href="/stylesheets/style.css"> 
     <base href="/"> 
    </head> 
    <body ng-view> 
     <script src="/angular/angular.min.js"></script> 
     <script src="/lib/angular-route.min.js"></script> 
     <script src="/lib/angular-sanitize.min.js"></script> 
     <script src="/lib/ui-bootstrap-custom-1.3.3.min.js"></script> 
     <script src="/lib/ui-bootstrap-custom-tpls-1.3.3.min.js"></script> 
     <script src="/angular/loc8r.min.js"></script> 
     <script src="/javascripts/jquery-1.12.2.min.js"></script> 
     <script src="/bootstrap/js/bootstrap.min.js"></script> 
     <script src="/javascripts/validation.js"></script> 
    </body> 
</html> 

Answer 1

错误告诉你有一个未知的供应商$modalProvider。这意味着你正在注入$modal，它没有在应用程序中定义。

原因是angular-ui-bootstrap现在使用$uib作为服务的前缀。

尝试改变$modal到$uibModal和在角-UI-自举文档验证