ui-bootstrap 模态框不会关闭或关闭

Question

ui-bootstrap 的新手，我已经让模态出现，但无法通过按下按钮将其关闭。我尝试了很多组合，但似乎没有任何效果（或者它使模态根本不出现）。

模态框在一个单独的文件中：

<div ng-controller = 'entryCtrl' class="modal" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <div class="modal-inner-content">
                </div>
                <div class="modal-footer" id="modal-footer">
                    <button type="button" class="btn btn-success" ng-click="cancel()"><i class="glyphicon glyphicon-backward"></i> Back</button>
                    <button type="button" class="btn btn-danger" ng-click="ok()"><i class="glyphicon glyphicon-forward"></i> Continue</button>
                </div>
            </div>
        </div>
    </div>
</div>

它在具有相同控制器的不同 html 文件中调用（我尝试将它们作为不同的控制器，但变量似乎根本不会注入，即模态实例将是未定义的）。

在控制器中，我可以将其打开为：

xControllers.controller('entryCtrl', [
        '$scope', '$window', '$modal', '$log',
        'SharedProperties',
        function ($scope, $window, $modal, $log,
        SharedProperties) {

            $scope.open = function (size) {
                $scope.modal = $modal({
                    templateUrl: './views/modals/possible_slurs.html',
                    controllerAs: ['$window', '$log', '$modalInstance', function ($window, $log, $modalInstance) {
                        this.ok = function () {
                            $modalInstance.close();
                        };

                        this.cancel = function () {
                            $modalInstance.dismiss('cancel');
                            $window.history.back();
                        };
                                    }],
                    scope: $scope
                });
            };

    }]);

出于某种原因，$modal.open() 不起作用，template 和 controller 参数也不起作用（它只接受 templateUrl 和 controllerAs).

我试图将 controllerAs 设置为不同的控制器，但是那个单独的控制器无法识别模态实例（它出现为未定义）。

我将依赖项设置为：

var x = angular.module('x-app', [
        'xControllers',
        'ngAnimate',
        'ngRoute',
        'ngResource',
        'mgcrea.ngStrap',
        'angularUtils.directives.dirPagination',
        'ui.bootstrap'
    ]);

及其版本：

"dependencies": {
    "socket.io": "^2.2.0",
    "angular": "^1.7.8",
    "angular-animate": "^1.7.8",
    "angular-motion": "^0.4.4",
    "angular-resource": "^1.7.8",
    "angular-strap": "^2.3.12",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "angular-bootstrap": "^2.5.0"
  }

非常感谢，如果需要更多信息来帮助解决此问题，请告诉我！

Answer 1

这是我遇到过的最令人费解的事情。在文档中来回翻了几个小时和几天之后，我找到了答案：当然，有很多很多问题正在发生，而且任何东西出现的事实完全是侥幸。

我只是 post 我的工作，但足以说明：Angular 版本在这里非常重要。

新的工作模式（注意这里没有指定控制器，也没有任何包装 divs）：

<div class="modal-header"></div>
<div class="modal-body">
    <div class="modal-inner-content">
    </div>
    <div class="modal-footer" id="modal-footer">
        <button type="button" class="btn btn-success" ng-click="cancel()"><i class="glyphicon glyphicon-backward"></i> Back</button>
        <button type="button" class="btn btn-danger" ng-click="ok()"><i class="glyphicon glyphicon-forward"></i> Continue</button>
    </div>
</div>

打开模式的新工作控制器（注意切换到$uibModal）：

xControllers.controller('entryCtrl', [
        '$scope', '$window', '$uibModal', '$log',
        'SharedProperties',
        function ($scope, $window, $uibModal, $log,
        SharedProperties) {

            $scope.open = function (size) {
                $uibModal.open({
                    templateUrl: './views/modals/modal.html',
                    controller: 'modalInstanceCtrl',
                    scope: $scope
                });
            };

    }]);

并且在该控制器中调用了新的模态控制器：

xControllers.controller('modalInstanceCtrl', [
        '$scope', '$window', '$uibModalInstance',
        function ($scope, $window, $uibModalInstance) {

        $scope.ok = function () {
            $uibModalInstance.close();
        };

        $scope.cancel = function () {
            $uibModalInstance.close();
            $window.history.back();
        };


    }]);

这似乎起到了作用。非常感谢创建此 Plunker 的人（http://embed.plnkr.co/4VcNom/) because the official documentation was essentially the opposite of useful in this regard (https://angular-ui.github.io/bootstrap/；它仅处理模态 HTML 与主 HTML 在同一 HTML 文档中加载的情况，不适用于单独的文件）。

任何人，希望这对其他人有帮助。

ui-bootstrap 模态框不会关闭或关闭

ui-bootstrap modal won't close or dismiss

javascript

button

bootstrap-modal

bootstrap-ui

angularjs-1.7