web-dev-qa-db-fra.com

Comment masquer/afficher la même instance modale avec AngularJS?

J'utilise actuellement angular-ui-bootstrap $ modal pour afficher une boîte de dialogue permettant à l'utilisateur de rechercher et de sélectionner un fichier. La liste des fichiers provient de box.com. J'utilise donc l'API Box pour rechercher des fichiers et générer une vignette à afficher à côté de chaque fichier dans les résultats de la recherche.

La génération de vignettes est assez lente et l'utilisateur doit appeler cette boîte de dialogue de recherche plusieurs fois dans la même page. Il serait donc utile pour l'utilisateur que la boîte de dialogue de recherche contienne les résultats de la recherche précédente lors de la réouverture.

La question est de savoir comment puis-je réutiliser (c'est-à-dire afficher/masquer) la même instance modale? Angular-ui semble détruire/recréer le dialogue à chaque fois. Même chose avec la sangle angulaire.

Modifier

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

};
angularjsangular-ui-bootstrapangular-strap
12
Guillaume Morin

Pour créer/cacher un modal ng-strap, vous pouvez l'utiliser comme ceci:

     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();
    };
1
Rahul Tiwari

Pour créer un modal, vous pouvez le faire comme ceci:

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

l'attribut "show" est défini sur false, ce qui empêche le modal de s'afficher lorsqu'il est chargé.

Pour afficher ce modal nous pouvons alors le faire comme ceci:

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

De même, pour masquer ce modal, nous pouvons le faire comme ceci:

planModal.$promise.then(planModal.hide);
0
user1005240
     <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;
}
0
Saikh Rakif

Hmmmm a eu du mal avec cela, la meilleure chose à faire est d'utiliser uniquement les CSS. Les règles suivantes peuvent être utilisées pour afficher/masquer la fenêtre modale.

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

Afficher/masquer la même instance modale n’est pas possible (de façon claire et agréable, au moins), mais vous pourrez peut-être encore accélérer les choses. La manière de le faire dépend de ce que vous entendez par thumbnail generation. 

En d'autres termes, si le téléchargement de toutes les images est lent, car une solution peut prendre du temps, une solution possible serait de pré-télécharger toutes les images afin qu'elles soient déjà mises en cache par le navigateur au moment où vous essayez d'afficher la boîte de dialogue. Cette réponse explique comment faire cela.

D'autre part, si vous entendez par «génération de vignettes» le rendu des vignettes une fois que tous les fichiers ont été téléchargés, et que cela prend beaucoup de temps, vous voudrez peut-être jeter un coup d'œil à votre css pour voir s'il est possible de simplifier quoi que ce soit. le travail du navigateur plus facile.

0
irfanka