Не можете ввести $ uibModal в контроллер angularjs?

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', функция ($ 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 () {
            });

}

* +1025 *}]);

app.controller ('ChecklistModalInstanceCtrl', функция ($ scope) {

});

Ошибка, которую я получаю: Неизвестный поставщик: $ uibModalProvider <- $ uibModal <- appCtrl </p>

Если я меняю первую строку js:

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

Ошибка, которую я получаю: Не удалось создать экземпляр модуля demoApp

Ответы на похожие вопросы, которые я нашел, не сработали, может кто-нибудь помочь?

Answer 1

Вам необходимо ввести ui.bootstrap как зависимость от вашего модуля,

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

также добавьте ссылку

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