Как скрыть/показать тот же модальный экземпляр с помощью AngularJS?

В настоящее время я использую angular-ui-bootstrap $ modal для отображения диалога, который позволяет пользователю искать и выбирать файл. Список файлов взят с box.com, поэтому я использую API-интерфейс box для поиска файлов и создания эскиза для отображения рядом с каждым файлом в результатах поиска.

Создание эскизов происходит довольно медленно, и пользователю необходимо несколько раз вызывать это диалоговое окно поиска на одной и той же странице. Поэтому для пользователя было бы полезно, если бы диалоговое окно поиска содержало предыдущие результаты поиска при повторном открытии.

Вопрос в том, как я могу повторно использовать (т.е. показывать/скрывать) один и тот же модальный экземпляр? Кажется, Angular-UI уничтожает/воссоздает диалог каждый раз. То же самое с угловым ремешком.

Изменить

Вот Плункер:

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

};

Ответы

Ответ 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();
    };

Ответ 2

Чтобы создать модальный способ, вы можете сделать это следующим образом:

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

для атрибута "show" установлено значение false, которое останавливает отображение модального файла при его загрузке.

Чтобы отобразить этот модальный способ, мы можем сделать это следующим образом:

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

Аналогично, чтобы скрыть этот модальный способ, мы можем сделать это следующим образом:

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

Ответ 3

Хмммм боролся с этим, самое лучшее, что можно сделать, чтобы использовать только следующие правила CSS, можно использовать для отображения/скрытия модального окна

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

Ответ 4

Отображение/скрытие одного и того же модального экземпляра невозможно (по крайней мере, по-хорошему, чистому), но вы все равно сможете немного ускорить процесс. Как это сделать, это зависит от того, что вы подразумеваете под thumbnail generation.

Другими словами, если он медленный, потому что для загрузки всех изображений требуется много времени, то возможным решением было бы предварительно загрузить все изображения, чтобы они уже были кешированы браузером к тому моменту, когда вы попытаетесь показать диалог, Этот ответ объясняет, как это сделать.

С другой стороны, если "генерация миниатюр" означает фактически рендеринг эскизов после загрузки всех ресурсов, и это занимает много времени, тогда вы можете взглянуть на свой css и посмотреть, можете ли вы упростить что облегчит работу браузера.

Ответ 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;
}