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 l'ajouter au DOM directement à partir du contrôleur.
Cela cassera le modèle de conception MVC. Je ne suis pas satisfait de cette solution.
Option 2
Je pourrais toujours insérer le code de toutes les fenêtres contextuelles dans le fichier HTML statique. Ensuite, en utilisant ngShow
, je peux masquer / afficher uniquement la fenêtre contextuelle correcte.
Cette option n'est pas vraiment évolutive.
Je suis donc presque sûr qu'il doit y avoir une meilleure façon de réaliser ce que je veux.
Réponses:
Sur la base de mon expérience avec les 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 des sortes de routes AngularJS mais juste affichés dans un popup modal.
Le projet d'amorçage AngularUI ( http://angular-ui.github.com/bootstrap/ ) a un excellent
$modal
service (anciennement appelé $ dialog avant la version 0.6.0) qui est une implémentation d'un service pour afficher le contenu partiel comme un popup modal.la source
C'est drôle parce que j'apprends moi-même 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 autour de 28h30.
Cela revient à placer ce morceau de code particulier dans un service plutôt que dans un contrôleur.
Ma conjecture serait d'injecter de nouveaux éléments popup dans le DOM et de les gérer séparément au lieu d'afficher et de cacher le même élément. De cette façon, vous pouvez avoir plusieurs fenêtres contextuelles.
La vidéo entière est également très intéressante à regarder :-)
la source
Modification pour ajouter un exemple de haut niveau (non fonctionnel)
la source
scope.watch(showPopup, function(newVal, oldVal){
?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: depuis, j'utilise ng-dialog de http://likeastore.github.io/ngDialog qui est flexible et n'a aucune dépendance.
la source
Angular-ui est livré avec une directive dialog. Utilisez-la et définissez templateurl sur la page que vous souhaitez inclure. C'est la manière la plus élégante et je l'ai également utilisée dans mon projet. Vous pouvez passer plusieurs autres paramètres pour le dialogue selon les besoins.
la source