Afficher les fenêtres pop-up de la manière la plus élégante

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

Maintenant, je dois afficher différentes fenêtres contextuelles lorsque des conditions spécifiques 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 le pop-up, et ajouter au DOM directement du contrôleur.

Cela va briser le modèle de conception MVC. Je ne suis pas satisfait 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 peux cacher / afficher uniquement la fenêtre contextuelle correcte.

Cette option n'est pas vraiment évolutive.

Je suis donc très sûr qu'il doit y avoir une meilleure façon de réaliser ce que je veux.

Compte tenu de mon expérience avec les modules AngularJS jusqu'à présent, je crois que l'approche la plus élégante est un service dédié auquel nous pouvons fournir un modèle partiel (HTML) à afficher dans un mode modal.

Lorsque nous pensons à cela, les modales sont des routes AngularJS, mais simplement affichées en mode popup modal.

Le projet AngularUI bootstrap ( http://angular-ui.github.com/bootstrap/ ) dispose d'un excellent service $modal (utilisé pour être appelé $ dialoguer avant la version 0.6.0) qui est une implémentation d'un service pour afficher partiellement Le contenu sous forme de popup modal.

C'est drôle parce que j'apprends Angular moi-même et 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 vers 28h30.

Il se résume à placer ce code particulier dans un service plutôt qu'un contrôleur.

J'avais l'impression d'injecter de nouveaux éléments contextuels dans les DOM et de les séparer au lieu de montrer et de cacher le même élément. De cette façon, vous pouvez avoir plusieurs fenêtres pop-up.

Toute la vidéo est très intéressante à regarder aussi 🙂

Créez une directive «popup» et appliquez-la au conteneur du contenu contextuel
Dans la directive, enveloppez le contenu dans une position absolive div avec le masque div ci-dessous.
Il est bon de déplacer les 2 divs dans l'arborescence des DOM au besoin dans la directive. Tout code UI est correct dans les directives, y compris le code pour positionner le popup 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 de portée 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; });

Voir http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ pour une manière simple de faire un dialogue modal avec Angular et sans nécessiter de bootstrap

Edit: J'ai utilisé ng-dialog depuis http://likeastore.github.io/ngDialog qui est flexible et n'a aucune dépendance.

Angular-ui est livré avec une directive de dialogue. Utilisez-le et définissez templateurl sur n'importe quelle page que vous souhaitez inclure. C'est la manière la plus élégante et je l'ai également utilisé dans mon projet. Vous pouvez passer plusieurs autres paramètres pour la boîte de dialogue selon les besoins.