web-dev-qa-db-fra.com

Montrer les pop-ups de la manière la plus élégante

J'ai cette application AngularJS. Tout fonctionne très bien.

Maintenant, je dois montrer différentes fenêtres contextuelles lorsque certaines conditions deviennent vraies, et je me demandais quelle serait la meilleure façon de procéder.

Actuellement, j’évalue deux options, mais je suis absolument ouvert à d’autres options.

Option 1

Je pourrais créer le nouvel élément HTML pour la fenêtre contextuelle et l'ajouter au DOM directement à partir du contrôleur.

Cela rompra le modèle de conception MVC. Je ne suis pas content de cette solution.

Option 2

Je pourrais toujours insérer le code pour toutes les fenêtres contextuelles dans le fichier HTML statique. Ensuite, en utilisant ngShow, je ne peux masquer/afficher que la fenêtre contextuelle correcte.

Cette option n'est pas vraiment évolutive.

Je suis donc presque sûr qu’il doit exister un meilleur moyen de réaliser ce que je veux.

javascriptmodel-view-controllerangularjspopupshow-hide
178
Bruno

Sur la base de mon expérience des modaux AngularJS jusqu’à présent, je pense que l’approche la plus élégante est un service dédié auquel nous pouvons fournir un modèle partiel (HTML) à afficher dans un modal.

Quand on y pense, les modaux sont en quelque sorte des itinéraires AngularJS mais ils sont simplement affichés dans une fenêtre contextuelle modale.

Le projet AngularUI bootstrap ( --- (http://angular-ui.github.com/bootstrap/ ) possède un excellent service $modal _ (auparavant appelé $ dialog version 0.6.0) qui est une implémentation d’un service permettant d’afficher le contenu de partial sous forme de popup modal.

88
pkozlowski.opensource

C'est drôle parce que j'apprends Angular et que je regardais des vidéos de leur chaîne sur Youtube. L’orateur mentionne votre problème exact dans cette vidéo https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 aux alentours de la minute 28:30.

Cela revient à placer ce morceau de code particulier dans un service plutôt que dans un contrôleur.

Mon hypothèse serait d'injecter de nouveaux éléments contextuels dans le DOM et de les gérer séparément au lieu d'afficher et de masquer le même élément. De cette façon, vous pouvez avoir plusieurs popups.

La vidéo entière est également très intéressante à regarder :-)

29
Bart
  • Créer une directive 'popup' et l'appliquer au conteneur du contenu de la popup
  • Dans la directive, placez le contenu dans une position absolue div avec le masque div en dessous.
  • Il est possible de déplacer les 2 divs dans l’arborescence DOM selon les besoins depuis la directive. Tout code d’interface utilisateur est correct dans les directives, y compris le code pour positionner la fenêtre contextuelle au centre de l’écran.
  • Créez et liez un indicateur booléen au contrôleur. Ce drapeau contrôlera la visibilité.
  • Créez des variables d'étendue qui se lient aux fonctions OK/Annuler, etc.

Modification pour ajouter un exemple de haut niveau (non fonctionnel)

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



.directive('popup', function() {
  var p = {
      link : function(scope, iElement, iAttrs){
           //code to wrap the div (iElement) with a abs pos div (parentDiv)
          // code to add a mask layer div behind 
          // if the parent is already there, then skip adding it again.
         //use jquery ui to make it dragable etc.
          scope.watch(showPopup, function(newVal, oldVal){
               if(newVal === true){
                   $(parentDiv).show();
                 } 
              else{
                 $(parentDiv).hide();
                }
          });
      }


   }
  return p;
});
14
Ketan

Voir http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ pour un moyen simple de faire un dialogue modal avec Angular et sans avoir besoin de bootstrap

Edit: J'utilise depuis ng-dialog de http://likeastore.github.io/ngDialog qui est flexible et ne possède aucune dépendance.

14
Nik Dow

Angular-ui est livré avec une directive de dialogue.Utilisez-le et réglez templateurl sur la page que vous souhaitez inclure. C’est la manière la plus élégante et je l’utilise aussi dans mon projet. Vous pouvez transmettre plusieurs autres paramètres pour le dialogue selon vos besoins.

7
user2203937