Gestion d'une modale avec ng-if
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:
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">×</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:
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...
