0

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
                });
            };

    }]);

由于某种原因 the$modal.open()不起作用， andtemplate和controller参数也不起作用（它只接受templateUrland 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"
  }

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

4

1 回答 1

0

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

我只会发布我的工作内容，但我只想说：Angular 版本在这里非常重要。

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

<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/）的人，因为官方文档在这方面基本上与有用的相反（https://angular-ui.github.io/bootstrap/ ; 它只处理模态的 HTML 加载到与主 HTML 相同的 HTML 文档中的情况，而不是单独的文件）。

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

于 2020-06-16T17:49:32.687 回答