AngularJS, afficher des popups - Le moyen le plus élégant ?

Question

Cette fois-ci, j'ai une question plus conceptuelle qu'autre chose... donc il n'y a pas beaucoup de code réel ici.

J'ai une application angularJS. Tout fonctionne très bien.

J'ai maintenant besoin d'afficher différentes fenêtres pop-up lorsque des conditions spécifiques deviennent vraies, et je me demandais quelle était la meilleure façon de procéder.

Actuellement, j'évalue deux options, mais je suis absolument ouvert à d'autres options (si elles sont meilleures).

(Option 1)

Je pourrais créer le nouvel élément html pour le popup, et l'ajouter au DOM directement depuis le contrôleur. DOM directement depuis le contrôleur.

Cela brisera 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 pop-up dans le fichier html statique. statique.

Ensuite, en utilisant ngShow je peux masquer/afficher uniquement la bonne fenêtre popup.

Cette option n'est pas vraiment évolutive.

Je suis donc sûr qu'il doit y avoir un meilleur moyen d'obtenir ce que je veux.

Comme toujours, toute aide est la bienvenue.

Merci d'avance

Answer 1

D'après mon expérience des modales 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 une modale.

Quand on y pense, les modales sont des sortes de routes AngularJS, mais affichées dans une popup modale.

Le projet bootstrap AngularUI ( http://angular-ui.github.com/bootstrap/ ) a un excellent $modal (appelé $dialog avant la version 0.6.0) qui est une implémentation d'un service permettant d'afficher le contenu d'une partie du site sous forme de popup modale.

Answer 2

C'est drôle parce que je suis en train d'apprendre Angular moi-même et que je regardais des vidéos de leur chaîne sur Youtube. L'intervenant mentionne votre problème exact dans cette vidéo https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 vers la marque de 28:30 minutes.

Il s'agit de placer ce morceau de code particulier dans un service plutôt que dans un contrôleur.

Je pense qu'il faudrait injecter de nouveaux éléments popup dans le DOM et les traiter séparément au lieu d'afficher et de masquer le même élément. De cette façon, vous pouvez avoir plusieurs fenêtres contextuelles.

L'ensemble de la vidéo est également très intéressant à regarder :-)

Answer 3

• Créez une directive "popup" et appliquez-la au conteneur du contenu de la popup.
• Dans la directive, enveloppez le contenu dans une div de position absolue avec la div de masque en dessous.
• Il est possible de déplacer les deux divs dans l'arbre DOM à partir de la directive. Tout code d'interface utilisateur est acceptable dans les directives, y compris le code permettant de positionner le popup au centre de l'écran.
• Créer et lier un drapeau booléen au contrôleur. Ce drapeau contrôlera la visibilité.
• Créez des variables de portée qui se lient aux fonctions OK / Cancel, 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;
});

Answer 4

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

Answer 5

Angular-ui est livré avec la directive dialog. Utilisez-la et définissez templateurl à la page que vous voulez inclure. C'est la façon la plus élégante et je l'ai utilisé dans mon projet aussi. Vous pouvez passer plusieurs autres paramètres pour le dialogue en fonction de vos besoins.