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

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

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

问题是如何重复使用（即显示/hide）相同的模态实例？Angular-UI似乎每次都会摧毁/重现对话框。Angular-Strap同样的事情。

编辑

这是一个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');
  };
};

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

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

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

" show"属性设置为false，该属性在加载时停止模态显示。

要显示这种模式，我们可以这样做：

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

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

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

hmmmm在这方面挣扎的最好的事情只是使用CSS以下规则来显示/隐藏模态窗口

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

表现/隐藏相同的模态实例是不可能的（至少以干净的方式），但是您仍然可以稍微加快速度。如何做到这取决于您的含义thumbnail generation。

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

另一方面，如果通过"缩略图生成"，您的意思是在下载所有资产后实际上呈现缩略图，这需要很长时间，那么您可能需要看一下CSS，看看是否可以简化任何使浏览器的工作更容易的东西。

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

相关内容

最新更新

热门标签：