javascript - 添加 Angular.js Modal 会出现错误 : [$injector:unpr]

Question

所以我有一个应用程序，它工作得很好(平均堆栈)，我添加了 <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']);在我的 Angular 应用程序声明中。然后在 Controller 中我通过 locationDetailCtrl.$inject = ['$routeParams', '$modal', 'loc8rData']; 正确注入(inject)它。我还没有声明ng-controller html 中的任何位置，所以我不太确定问题可能是什么。

最后，错误的副本:

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 ( Angular 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。这意味着您正在注入(inject) $modal 并且它没有在应用程序中定义。

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

尝试将 $modal 更改为 $uibModal 并在 angular-ui-bootstrap 文档中进行验证