angularjs - 如何使用 AngularJS 隐藏/显示相同的模态实例？

Question

我目前正在使用 angular-ui-bootstrap $modal 来显示一个对话框，让用户搜索并选择一个文件。文件列表来自box.com，所以我使用box API搜索文件并生成缩略图显示在搜索结果中的每个文件旁边。

缩略图生成速度很慢，用户需要在同一页面中多次调用此搜索对话框。因此，如果搜索对话框在重新打开时包含先前的搜索结果，这对用户会有所帮助。

问题是如何重用(即显示/隐藏)相同的模态实例？
Angular-ui 似乎每次都会销毁/重新创建对话框。
Angular 带也是如此。

编辑

这是一个 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

要创建/隐藏 ng-strap 模态，您可以像这样使用它:

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