12

我目前正在使用 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');
  };

};
4

5 回答 5

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();
    };
于 2016-05-16T12:49:10.387 回答
0

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

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

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

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

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

同样，要隐藏此模式，我们可以这样做：

planModal.$promise.then(planModal.hide);
于 2015-01-07T13:11:46.497 回答
0

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

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

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

于 2016-04-26T07:28:33.133 回答
0

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

 angular.element('.modal').css('display', 'none');// to hide the modal
 angular.element('.modal').css('display', 'block');// to show the modal
于 2016-01-27T13:19:54.860 回答
0 
     <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;
}
于 2019-01-23T10:50:36.340 回答