How to hide/show same modal instance with AngularJS?

Question

I'm currently using angular-ui-bootstrap $modal to display a dialog which lets the user search for and pick a file. The list of files comes from box.com, so I use the box API to search for files and generate a thumbnail to display beside each file in the search result.

Thumbnail generation is quite slow and the user needs to call this search dialog multiple times in the same page. So it would be helpful for the user if the search dialog would contain the previous search results when re-opened.

The question is how can I re-use (i.e. show/hide) the same modal instance ? Angular-ui seems to destroy/recreate the dialog each time. Same thing with angular-strap.

Edit

Here is a Plunkr:

var app = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {

  $scope.open = function() {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,

    });

    modalInstance.result.then(function() {
      $log.info('Modal closed at: ' + new Date());
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function($scope, $modalInstance) {

  $scope.friends = [{
    name: 'John',
    phone: '555-1276'
  }, {
    name: 'Mary',
    phone: '800-BIG-MARY'
  }, {
    name: 'Mike',
    phone: '555-4321'
  }, {
    name: 'Adam',
    phone: '555-5678'
  }, {
    name: 'Julie',
    phone: '555-8765'
  }, {
    name: 'Juliette',
    phone: '555-5678'
  }];

  $scope.ok = function() {
    $modalInstance.close('close');
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };

};

Answer 1

To create/hide a ng-strap modal you can use it like this:

     var modalInstance;
        $scope.open = function() {    
            modalInstance= $modal.open({
                   templateUrl: 'myModalContent.html',
                   controller: ModalInstanceCtrl,        
            });
 //This is how to show the modal.

        modalInstance.$promise.then(modalInstance.show);
        };

    //When u want to hide the modal use this as written below:    
    $scope.close = function() {
        modalInstance.hide();
    };

Answer 2

To create a modal you can do so like this:

var planModal = $modal({scope: $scope,
            template: 'modalTemplate.html',
            show: false});

the "show" attribute is set to false which stops the modal from displaying when it is loaded.

To display this modal we can then do so like this:

planModal.$promise.then(planModal.show);

Similarly, to hide this modal we can do so like this:

planModal.$promise.then(planModal.hide);

Answer 3

Hmmmm struggled with this the best thing to do its just to use css following rules can be used to show/hide modal window

 angular.element('.modal').css('display', 'none');// to hide the modal
 angular.element('.modal').css('display', 'block');// to show the modal

Answer 4

Showing/hiding the same modal instance is not possible (in a nice, clean way, at least), but you might still be able to speed things up a bit. How to do that depends on what you mean by thumbnail generation.

In other words, if it's slow because it takes long time to download all images, then a possible solution would be to pre-download all images so that they are already cached by the browser by the time you try to show the dialog. This answer explains how to do that.

On the other hand, if by 'thumbnail generation' you mean actually rendering thumbnails once all assets are downloaded, and that takes a long time, then you might want to take a look at your css, and see if you can simplify anything to make the browser's job easier.

Answer 5

     <div class="modal fade in" id="invoice_popup" ng-show="showInvModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <!--3rd next popup-->
                <div id="Div2" class="modal-dialog" style="width: 40%;">
                    <div class="modal-content" style="margin-top:6%;margin-left:8%;">
                        <div class="modal-header" style="padding:6px;">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size:30px;">&times;</button>
                            <h4 class="modal-title" id="H1"><label>Invoice Summary</label></h4>

                        </div>
                        <div class="modal-body" style="padding:5px;">
    </div>
                        <div class="modal-footer">
                            <div class="draft-btn-bottom">
                                <a href="JavaScript:viod(0);" ng-click="make_invoice()">Save</a>
                                <a href="JavaScript:viod(0);" data-dismiss="modal">Cancel</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

    // angular js controler code in a function
$scope.Open_Modal_Popup = function () {
     var popup_inv = angular.element("#invoice_popup");
                popup_inv.modal('show');
               $scope.showInvModal = true;
}