Question

我目前正在使用angular-ui-bootstrap $ modal来显示一个对话框，让用户搜索并选择一个文件。文件列表来自box.com，因此我使用框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

要创建/隐藏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 2

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

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

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

要显示此模态，我们可以这样做：

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

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

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

Answer 3

嗯挣扎着这个最好的事情只是为了使用css遵循规则可以用来显示/隐藏模态窗口

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

Answer 4

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

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

另一方面，如果通过缩略图生成＆＃39;你的意思是在下载所有资产后实际渲染缩略图，这需要很长时间，然后你可能想看看你的css，看看你是否可以简化任何事情以使浏览器的工作更容易。

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

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

5 个答案: