AngularJS : Exemple d’utilisation de Angular Boostrap modal

Pour permettre d’utiliser simplement les composants Boostrap au sein d’un code AngularJS la plupart d’entre eux ont été réécrit sous la forme de directive ou de module AngularJS.

La liste complète et la documentation de l’API ici : http://angular-ui.github.io/bootstrap/
Pour ajouter le composant avec bower :

bower install angular-bootstrap

Dans cet article je vais vous détailler l’utilisation de la partie « Modal » qui permet d’afficher une boite de dialogue.

Pour créer une boite de dialogue, on va utiliser le service $modal. Il faut savoir que le scope de la modal est différent du scope courant de notre page, aucune de nos variables courantes n’est donc accessible par défaut. Toutefois il est possible de transmettre une référence vers ces variables à notre fenêtre modal.

Le service $modal ne reconnait qu’une seule méthode open(). Comme son nom l’indique c’est elle qui permet l’ouverture de la fenêtre. Cette méthode prend en paramètre tout une liste d’options (liste complète : http://angular-ui.github.io/bootstrap/#/modal)
Voici une liste des options essentielles :

  • templateUrl : path du fichier HTML template. A noter qu’on peut également utiliser un template stocké dans une chaine de caractère via l’option template.
  • keyboard : indique si la fenêtre peut ou non être fermée via action au clavier
  • backdrop : définit les paramètres de l’arrière-plan + fermeture quand on clique sur l’arrière-plan.
  • controller : code du controller de l’instance de la fenêtre modal.
  • resolve : ensemble des variables et/ou fonctions qui vont être passées au controller de la fenêtre modal. Cet argument est crucial, c’est grâce à lui qu’on va pouvoir faire une connexion entre les valeurs stockées dans le scope parent et le scope de la fenêtre.

Au sein du controller on accède à deux méthodes pour gérer la fenêtre :

  • $close(result) : permet de fermer la fenêtre de dialogue dans un cas classique.
  • $dismiss(reason) : permet de fermer la fenêtre dans le cas d’une annulation.

Exemple : Création d’une fenêtre de confirmation de suppression.

Le template HTML :

Exemple de template HTML d’une boite de dialogue.

<div class="modal-header"><h2>Confirmation</h2></div>
<div class="modal-body">Voulez-vous supprimer cette élement ? </div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="delete()">Confirmer</button>
    <button class="btn" ng-click="cancel()">Annuler</button>
</div>

fenetre

Code la partie JavaScript

//Préparation des paramètres de la fenêtre

var dialogOpts = {
    backdrop: true,
    keyboard: true,
    templateUrl: 'monTemplate.tpl.html', // Url du template HTML
    controller: ['$scope', '$modalInstance','scopeParent', 'id',
        function($scope, $modalInstance,scopeParent,id) { //Controller de la fenêtre. Il doit prend en paramètre tous les élèments du "resolve".
            $scope.delete = function() {
                //On fait appel à la fonction du scope parent qui permet de supprimer l'élément.
                //On peut également faire appel à un service de notre application.
                scopeParent.delete(id);
                //Fermeture de la fenêtre modale
                $modalInstance.close();
            };
            $scope.cancel = function() {
                // Appel à la fonction d'annulation.
                $modalInstance.dismiss('cancel');
            };
        }
    ],
    resolve: {
        scopeParent: function() {
            return $scope; //On passe à la fenêtre modal une référence vers le scope parent.
        },
        id: function(){
            return $scope.id; // On passe en paramètre l'id de l'élément à supprimer.
        }
    }
};
 //Ouverture de la fenêtre
$modal.open(dialogOpts);

3 commentaires

  1. Milles merci, ca m’a résolu le problème que j’ai quand je voulais modifier une variable dans le scope parent.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

9 × cinq =