UI Bootstrap Modal don't close. AngularJS

Question

I was looking for this question on forum and the solution dosn't worked for me, so...

The only way to close the modal is clicking outside of modal, or press ESC on keyboard..

Here is my modal controller:

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');
            };
          });
      };                  
});

And here is my modal on 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>

I followed every answer, fiddle, plnkr, but i cannot make it work.

strelok2010 · Accepted Answer · 2017-01-26 05:13:40Z

1

Just move a cancel() method from uibModalInstance.result.then to your modal controller:

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
      });

answered Jan 26, 2017 at 5:13

strelok2010

1,2668 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Federico Ribero Over a year ago

Thanks. Working now.

Collectives™ on Stack Overflow

UI Bootstrap Modal don't close. AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related