Question

我想要一个关闭按钮，右上角的x，然后在模态外单击以关闭模态窗口。

在这里，我创建了用于打开模态的按钮：（rollup.html）

        <li style="float: right;">
          <button id="myBtn" ng-click="printDivModal('rollup-tab', test)">Modal Test</button>
        </li>

这将打开模态:( rollup.js）

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {

.....

$scope.printDivModal = function(divName,test) {
            console.log('opening pop up');
            var ModalInstance = $uibModal.open({
                scope: $scope,
                animation: $scope.animationsEnabled,
                templateUrl: 'app/views/modals/stackedModal.html',
                size: 'xl',
                controller: 'PrintViewCtrl',
                backdrop : 'static',

                resolve: {
                    test: function () {

                      return test;
                    }
                  }


            });

        }   
});

以下是模态本身的内容：（stackedModal.html）

    <div class="modal-footer">
        <button ng-click="closeModal()" type="button" class="btn btn-default">Close</button>
        <!-- data-dismiss="modal" -->
    </div>

这里我写了关闭模态的范围，但它似乎不起作用。当我单击关闭按钮时，会出现警报，但不执行该操作：（stackedModal.js）

app.controller('PrintViewCtrl', rollUpCtrl);
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal', 'headersvc','locFiltersvc']

function rollUpCtrl($scope, $rootScope, $http, $uibModal, $modalInstance, headersvc, locFiltersvc) {

.....

    $scope.closeModal = function () {
        alert("close the modal!");
            $modalInstance.close();
          };
}

感谢任何帮助。

编辑解析 （rollup.js）

app.controller('PrintViewCtrl', function($scope, $http, $rootScope, $uibModalInstance) {
    $scope.test = function() {
            $scope.regionName;
            $scope.groupName;
            $scope.mcName;
            $scope.districtNumber;
            $scope.routeNumber;
            $scope.weekEndDate;

    };

});

这是我要从中获取的数据（route.html）

        <div class="row">
            <div class="col-xs-6 col-md-4">
                <label>Region:</label>
                <span>{{regionName}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>Group:</label>
                <span>{{groupName}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>MC:</label>
                <span>{{mcName}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>District #:</label>
                <span>{{districtNumber}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>Route #:</label>
                <span>{{routeNumber}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>Week Ending Date:</label>
                <span>{{weekEndDate}}</span>
            </div>
            <div class="col-xs-6 col-md-4">
                <label>RSR:</label>
                <span style="text-transform: capitalize;">{{rsrName}}</span>
            </div>
        </div>

Answer 1

首先，该库的最新版本注入$uibModalInstance而非$modalInstance，因此请仔细检查。此外，您没有在控制器定义中注入$uibModalInstance：

rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal', '$uibModalInstance', 'headersvc','locFiltersvc'];
function rollUpCtrl($scope, $rootScope, $http, $uibModal, $uibModalInstance, headersvc, locFiltersvc) {

其次，backdrop: static将通过单击背景来阻止模态关闭。请改为backdrop: true。

AngularJS - 关闭模态

1 个答案: