UI Bootstrap 模态框不关闭。 AngularJS

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>

我遵循了每个答案，fiddle，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
      });