Afficher 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érents pop-ups 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 va casser le modèle de conception MVC. Je suis pas satisfait de cette solution.
Option 2
Je pourrais toujours insérer le code pour tous les pop-ups dans le fichier HTML statique. Ensuite, en utilisant ngShow, Je peux Masquer / Afficher uniquement le bon pop-up.
Cette option n'est pas vraiment évolutive.
Donc, je suis sûr qu'il doit y avoir une meilleure façon de réaliser ce que je veux.
5 réponses
Sur la base de mon expérience avec AngularJS modals 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 modal.
Quand on y pense, les modals sont une sorte de routes AngularJS mais juste affichés dans la popup modale.
Le projet AngularUI bootstrap ( http://angular-ui.github.com/bootstrap/) a un excellent service $modal (utilisé pour être appelé $ dialog avant la version 0.6.0) qui est un implémentation d'un service pour afficher le contenu de partial en tant que popup modal.
C'est drôle parce que J'apprends Angular moi-même 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 la marque de 28: 30 minutes.
Il s'agit de placer ce morceau de code particulier dans un service plutôt qu'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 de montrer et de cacher le un même élément. De cette façon, vous pouvez avoir plusieurs popups.
Toute la vidéo est très intéressante à regarder aussi: -)
- créez une directive 'popup' et appliquez-la au conteneur du contenu popup
- dans la directive, enveloppez le contenu dans une position absolue div avec le masque div en dessous.
- Il est correct de déplacer les 2 divs dans L'arborescence DOM si nécessaire à partir de la directive. Tout code D'interface utilisateur est OK dans les directives, y compris le code pour positionner le popup au centre de l'écran.
- crée et lie un drapeau booléen au contrôleur. Ce drapeau contrôlera la visibilité.
- Créer 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;
});
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 depuis http://likeastore.github.io/ngDialog qui est flexible et n'a aucune dépendance.
Angular-ui est livré avec la directive dialog.Utilisez-le et définissez templateurl sur la page que vous souhaitez inclure.C'est la façon la plus élégante et je l'ai utilisé dans mon projet. Vous pouvez passer plusieurs autres paramètres pour la boîte de dialogue selon les besoins.