angularjs - 无法在 angularjs Controller 中注入(inject) $uibModal ？

Question

我知道已经有人问过类似的问题，并且我已经尝试过答案，但它们对我不起作用，因此我提出新问题，这是我的代码:

HBs:

<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

<title>UI</title>

<div ng-controller="appCtrl">
    <button type="button" ng-click="openModal()">Abc</button>
</div>

    <script type="text/ng-template" id="checklistModal.html">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="cancel()"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal</h4>
        </div>
        <div class="modal-body" id="modal-body">
        <div style="padding-left: 3%; padding-right: 3%; margin-bottom: 8%;">
            <div class="row">
            <div class="col-md-12">
                        <table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
                            <thead style="display:table;width:100%;table-layout:fixed;">
                                <tr>
                                    <th style="text-align:center;" width="15%"></th>
                                    <th style="text-align:center;" width="15%">Pending</th>
                                    <th style="text-align:center;" width="15%">Done</th>
                                </tr>
                            </thead>
                            <tbody style="display:block;height:164px;overflow:auto;">
                                <tr style="display:table;width:100%;table-layout:fixed;">
                                    <td style="text-align:center;">Task 1</td>
                                    <td style="text-align:center;"></td>
                <td style="text-align:center;"></td>
                                </tr>
                     </tbody>
                        </table>
                        <button class="btn btn-primary pull-right" ng-click="" style="float:right;">Save</button>
            </div>
            </div>
        </div>
        </div>
    </script>

这是相应的js:

var app = angular.module("demoApp", ['ui.bootstrap']);

app.controller("appCtrl",['$scope', '$uibModal', function($scope, $uibModal) {

'使用严格';

$scope.openModal = function(){
        var parentElem = parentSelector ?
        angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;

        var modalInstance = $uibModal.open({
              ariaLabelledBy: 'modal-title',
              ariaDescribedBy: 'modal-body',
              templateUrl: "checklistModal.html",
              controller: 'ChecklistModalInstanceCtrl',
              scope: $scope,
              size: "lg",
              appendTo: parentElem,
              resolve: {

                }
            });

            modalInstance.result.then(function (selectedItem) {
              $ctrl.selected = selectedItem;
            }, function () {
            });

}

}]);

app.controller('ChecklistModalInstanceCtrl', function($scope) {

});

我得到的错误是:未知提供者:$uibModalProvider <- $uibModal <- appCtrl

如果，我改变js的第一行:

var app = angular.module("demoApp", []);

我得到的错误是:无法实例化模块 demoApp

我发现类似问题的答案不起作用，有人可以帮忙吗？

Answer 1

您需要将 ui.bootstrap 作为模块的依赖项注入(inject)，

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

同时添加引用

   <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>