Question

我在论坛上寻找这个问题并且解决方案对我不起作用，所以......

关闭模态的唯一方法是单击模态外部，或按键盘上的ESC ..

这是我的模态控制器：

app.controller('ModalCtrl', function($scope,  $uibModal) {

        $scope.items = [{}]


      $scope.showModal = function(selectedItem) {

          var uibModalInstance = $uibModal.open({
            windowTopClass: 'modal fade ql-modal',
            templateUrl : 'modalContent.html',
            controller : function($scope, $uibModalInstance, $uibModal, item){
                $scope.item = item;

            },
            resolve: {
                item: function(){
                    return selectedItem;
                }
            } // empty storage
          }); 

          uibModalInstance.result.then(function(selectedItem){
            $scope.selected = selectedItem;
            $scope.cancel = function(){
              $uibModalInstance.dismiss('cancel');
            };
          });
      };                  
});

以下是我在HTML上的模式：

<script type="text/ng-template" id="modalContent.html">
        <!-- Modal -->
                <!--Content-->
                <div class="modal-content">
                    <!--Header-->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="MyModal" aria-label="Close" ng-click="cancel()">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    ...................................

                        <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="cancel()">Close</button>
                    </div>
                </div>
                <!--/.Content-->
        <!--/Modal-->
    </script>

我跟着每一个答案，小提琴，plnkr，但我无法使它发挥作用。

Answer 1

将cancel（）方法从uibModalInstance.result.then移到你的模态控制器：

var uibModalInstance = $uibModal.open({
        windowTopClass: 'modal fade ql-modal',
        templateUrl : 'modalContent.html',
        controller : function($scope, $uibModalInstance, $uibModal, item){
            $scope.item = item;
            $scope.cancel = function(){
              $uibModalInstance.dismiss('cancel');
            };
        },
        resolve: {
            item: function(){
                return selectedItem;
            }
        } // empty storage
      });

UI Bootstrap Modal不会关闭。 AngularJS

1 个答案: