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）{

'use strict';

$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＆lt; - $ uibModal＆lt; - appCtrl

如果，我改变了js的第一行：

var app = angular.module（“demoApp”，[]）;

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

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

Answer 1

您需要将 var app = angular.module('app',['ui.bootstrap']); 作为依赖项注入模块，

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

也添加引用

{{1}}

无法在angularjs控制器中注入$ uibModal？

1 个答案: