UI Bootstrap Modal не закрывается. AngularJS

Question

Я искал этот вопрос на форуме и решение dosn't работал для меня, так что ...

Единственный способ закрыть модальный щелкает за пределами модальных или нажмите 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

Просто переместите метод отмены() от 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 
     });