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

Question

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

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

问题是如何重复使用（即显示/隐藏）相同的模态实例？ Angular-ui 似乎每次都会破坏/重新创建对话框。 与角带相同。

编辑

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

要创建模态，您可以这样做：

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

“show”属性设置为 false，这会在加载模式时停止显示。

为了显示这个模态，我们可以这样做：

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

同样，要隐藏这个模态，我们可以这样做：

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

Answer 2

嗯，最好的办法就是使用 css 来解决这个问题，以下规则可用于显示/隐藏模式窗口

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

Answer 3

显示/隐藏相同的模态实例是不可能的（至少以一种很好、干净的方式），但您仍然可以加快速度。 如何做到这一点取决于thumbnail generation 的含义。

换句话说，如果因为下载所有图像需要很长时间而速度很慢，那么一个可能的解决方案是预先下载所有图像，以便在您尝试显示对话框时它们已经被浏览器缓存. This answer 解释了如何做到这一点。

另一方面，如果“缩略图生成”是指在下载所有资源后实际渲染缩略图，这需要很长时间，那么您可能需要查看您的 CSS，看看是否可以简化任何让浏览器的工作更轻松的东西。

Answer 4

要创建/隐藏 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();
    };

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