AngularJS

Question

我想要一个关闭按钮，右上角的x，在模态框外点击关闭模态框window。

我在这里创建了打开模式的按钮：(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 - 关闭模态

AngularJS - Closing the modal

html

modal-dialog

twitter-bootstrap

angular-ui-bootstrap