使用 ui.bootstrap 的 $injector 错误

Question

我正在学习 AngularJS，并试图弄清楚如何使用 ngRepeat 处理模态、控制器和范围。我找到了我需要的工作 JSFiddle，但我似乎无法让它在本地工作。

来自thisJSFiddle，this帖子中提到，我有以下代码：

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-2.5.0.js"></script>


<div ng-app="app">

       <div ng-controller="CustomerController">
        <div ng-repeat="customer in customers">
            <button class="btn btn-default" ng-click="open(customer)">{{ customer.name }}</button> <br />

                <!--MODAL WINDOW-->
                <script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3>The Customer Name is: {{ customer.name }}</h3>
                    </div>
                    <div class="modal-body">
                            This is where the Customer Details Goes<br />
                            {{ customer.details }}
                    </div>
                    <div class="modal-footer">

                    </div>
                </script>

        </div>
        </div>


</div>

<script>
    var app = angular.module('app', ['ui.bootstrap']);

    app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, customer)
    {
    $scope.customer = customer;

    });

    app.controller('CustomerController', function($scope, $timeout, $modal, $log) {

        $scope.customers = [
            {
            name: 'Ricky',
            details: 'Some Details for Ricky',
            },
            {
            name: 'Dicky',
            details: 'Some Dicky Details',
            },
            {
            name: 'Nicky',
            details: 'Some Nicky Details',
            }
        ];

        // MODAL WINDOW
        $scope.open = function (_customer) {

            var modalInstance = $modal.open({
              controller: "ModalInstanceCtrl",
              templateUrl: 'myModalContent.html',
                resolve: {
                    customer: function()
                    {
                        return _customer;
                    }
                }
                 });

        };

    });

</script>

我的文件夹结构如下：

.
├── js
|   ├── ui-bootstrap-tpls-2.5.0.js
├── css
|   ├── bootstrap.min.css
├── index.html

我正在使用 XAMPP 打开 index.html。当我这样做时，什么都没有加载，我收到以下错误：

angular.js:13642 Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20CustomerController
    at angular.js:38
    at angular.js:4501
    at Object.d [as get] (angular.js:4654)
    at angular.js:4506
    at d (angular.js:4654)
    at e (angular.js:4678)
    at Object.invoke (angular.js:4700)
    at P.instance (angular.js:10177)
    at n (angular.js:9096)
    at g (angular.js:8459)

有谁知道为什么会发生这种情况，以及我需要在本地更改什么来解决这个问题？

谢谢！

Answer 1

读取错误：

http://errors.angularjs.org/1.5.6/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20CustomerController

它不能在CustomerController 中使用$modal 服务，因为它是not the right one for ui-bootstrap。

您应该改用$uibModal。 （语法相同：$uibModal.open()）