Gestion d'une modale avec ng-if

**magellan** · 11/02/2016, 15h53

Bonjour à tous

Ma problématique est simple et étrange à la fois.
1° Description
J'ai un bouton qui doit me faire apparaître une modale. Jusqu'ici pas de souci, j'obtiens le résultat escompté
Je veux que ce bouton disparaisse en fonction d'une valeur. Là aussi j'obtiens le comportement attendu...
Sauf que:
- Si j'ajoute la clause "ng-if" dessus, je perds le comportement du bouton activant la modale considérée
- En ôtant cette clause sur le bouton le fonctionnement redevient cohérent

Je soupçonne que c'est l'activation de la modale qui est le souci, parce que j'ai un autre bouton qui lui déclenche l'event ng-click... et qui fonctionne avec la même clause ng-if sans le moindre souci!

2° Vérifications effectuées
- Les deux boutons sont bien dans les mêmes divisions et j'ai les mêmes styles dessus.
- Le bouton d'appel de la modale n'a qu'un id qui est alors traité par une partie script de la page

3° Soupçons techniques
- L'état booléen vrai/faux doit être sûrement bloquant avec la partie modale
- La page modale considérée est une div directement intégrée à la page html considérée.

4° Le code de la page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html class="no-js" ng-app="starter" ng-controller="myController">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css ">
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.css ">
    <link href="styles/simple-sidebar.css" rel="stylesheet">
</head>
 
<body>
    <div class="container">
        <div id="wrapper">
            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li class="sidebar-brand"><a href="#">Start Bootstrap</a></li>
                    <li><a href="#/calc">calc</a></li>
                    <li><a href="#/liste">Liste des clients</a></li>
                    <li><a href="#">Overview</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12" style="padding:40px 50px;">
                            <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
<!--LE BOUTON QUI ME POSE SOUCI!-->
                           <button type="button" class="btn btn-default" id="myBtn">Se connecter</button>
                            <button ng-if="$root.logged == true" type="button" ng-click="deconnection()" class="btn btn-default" id="myBtn2">Déconnexion</button>
                        </div>
                        <div ng-view="">
                            <div ng-controller="myController">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" role="dialog" data-backdrop="false">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="padding:35px 50px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
                </div>
                <div class="modal-body" style="padding:40px 50px;">
                    <form role="form">
                        <div class="form-group">
                            <label for="usrname"><span class="glyphicon glyphicon-user"></span> Utilisateur</label>
                            <input type="text" class="form-control" ng-model="logon" id="usrname" placeholder="Entrez votre nom utilisateur">
                        </div>
                        <div class="form-group">
                            <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
                            <input type="password" class="form-control" ng-model="password" id="psw" placeholder="Mot de passe">
                        </div>
                        <div class="form-group">
                            <button type="submit" ng-click="connection()" data-dismiss="modal" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Connecter</button>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Annuler</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="/bower_components/jquery/dist/jquery.js" charset="utf-8"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.js" charset="utf-8"></script>
    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-wakanda/angular-wakanda.min.js"></script>
    <script src="/bower_components/angular-route/angular-route.js" charset="utf-8"></script>
    <!-- your app js -->
    <script src="scripts/app.js"></script>
    <script>
    $(document).ready(function() {
        $("#myBtn").click(function() {
            $("#myModal").modal({            
				backdrop: true
            });
        });
    });
 
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>
    </div>
</body>
</html>

Le code des boutons:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<!--LE BOUTON QUI ME POSE SOUCI!-->
                           <button type="button" class="btn btn-default" id="myBtn">Se connecter</button>
                            <button ng-if="$root.logged == true" type="button" ng-click="deconnection()" class="btn btn-default" id="myBtn2">Déconnexion</button>

Si vous avez des idées...

**slim** · 13/02/2016, 10h41

Salut!

J'ai pas tout regardé, parce qu'on peut pas le faire fonctionner vu que tu n'as pas mis ton app.js. Du coup, on devine.
Premièrement, déclare tes controleurs dans le routeur et non pas dans les templates.
Ensuite, tu as déclaré ton controleur deux fois... dans la balise html et dans un div. C'est inutile.

Ceci dit, ce n'est pas le problème. En analysant le code du bouton, j'ai vu qu'il y avait $root.logged. C'est quoi $root ?
ou plutot, tu as ça dans ton controleur ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $scope.$root.logged = false;

**Inikaam** · 15/02/2016, 09h47

Bonjour magellan,

Le premier aspect de ton problème est que tu oublies que ton code jquery est exécuté uniquement au lancement de ton appli. Si ton bouton n'existe pas ou disparaît, le bind de l'évenement click n'est plus affecté et ne le sera plus.
Je te suggère de te renseigner sur la méthode de traversing de jQuery.

Dans un second temps, bootstrap dispose de ses propres déclencheurs pour les modales, un peu plus clean que d'ajouter une couche jquery par dessus. Bon, ça ne change pas le problème au dessus, mais au moins c'est moins lourd

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="button" class="btn btn-default" id="myBtn" data-toggle="modal" data-target="#myModal">Se connecter</button>

Enfin, si tu souhaites utiliser les composants bootstrap dans ton appli angular, je te suggère le module UI-Bootstrap, qui répondra à tes besoins en prenant en compte ta couche angular, beaucoup plus pratique et qui évite la surcouche jquery, que demander de plus ?

**magellan** · 15/02/2016, 10h26

Bonjour... et merci à tous les deux pour vos réponses!

Je comprends un peu mieux la problématique, et j'avais clairement soupçonné une contradiction dans l'empilement de la modale et de mon traitement Angular/bootstrap.

Disons que je vais déclarer l'incident clos, parce que pour le coup je ne vais pas le laisser trainer inutilement vu que je dois sûrement reconstruire cette partie

Merci encore, et bonne journée

**magellan** · 15/02/2016, 14h36

Si j'avais le \o/ d'Homer Simpson en image je la mettrais

le bouton Bootstrap dont tu m'as fourni le code fonctionne parfaitement avec le ng-if!!!

Gracias :jap:

Gestion d'une modale avec ng-if

AngularJS

Discussions similaires

Partager

Partager