ng-click - fonction non appelée

**francky74** · 28/05/2016, 04h07

Bonjour,

J'ai une page html contenant des boutons qui apellent des fonctions à l'aide ng-click.
Sur tous les boutons que j'ai réalisés, cet attribut fonctionne mais sur l'un d'entre ... cela ne fonctionne pas mais je ne comprends pas pourquoi car la fonction dans le ng-click porte bien le même nom "valider_modification" dans les deux fichiers !?!

voici la partie du html :

Code html :

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

1
2
3
4
<button id="validerModif" class="btn btn-success"
                        ng-click="valider_modification(client_id, client_nom, client_prenom, client_numVoie, client_typeVoie, client_nomVoie, client_codePostal, client_ville);">
                        Valider
                </button>

et voici la partie du code javascript :

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
$scope.valider_modification = function(id, nom, prenom, numVoie, typeVoie, nomVoie, codePostal, ville) {
	   console.log("Valider modification");
	   $http.post('../gestClients/valider_modification', {
		   	"clientId": id,
		   	"clientNom": nom,
		   	"clientPrenom": prenom,
		   	"clientNumeroVoie": numVoie,
		   	"clientTypeVoie": typeVoie,
		   	"clientNomVoie": nomVoie,
		   	"clientCodePostal": codePostal,
		   	"clientVille": ville
		   }).success(function(response) {
			   $scope.clients = response.data.clients;
		   }).error(function(response){
			   $scope.erreurs.push(response.erreurs);
		   });
   }

et maintenant les fichiers dans leur intégralité :
HTML :

Code html :

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html ng-app="chezYenApp">
<head>
	<meta charset="ISO-8859-1">
	<title>Gestion des clients</title>
	<link type="text/css" rel="stylesheet" href="../css/bootstrap.css" />
	<link type="text/css" rel="stylesheet" href="../css/bootstrap-theme" />
	<link type="text/css" rel="stylesheet" href="../css/gestion_clients.css" />
	<link type="text/css" rel="stylesheet" href="../css/header.css" />
	<script type="text/javascript" src="../js/jquery-2.2.0.js"></script>
	<script type="text/javascript" src="../js/angular.js"></script>
	<script type="text/javascript" src="../js/angular-route.js"></script>
	<script type="text/javascript" src="../js/gestion_clients.js"></script>
	<script type="text/javascript" src="../js/productController.js"></script>
	<script type="text/javascript" src="../js/chezYenDirective.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script>
$(document).ready(function(){
        $("#nouveauClient").on('click', function() {
                console.log("clicked");
                $("#panelNouveauClient").slideToggle(600);
        });
});
</script>
</head>
<body id="body">
	<div id="chezYenBar">
		<img id="left" src="../images/logo_stylise.png" class="img-responsive center-block"/>
		<div id="center">
			<h3 style="color:#fff8d7;"><a style="color:#fff8d7;" href="../index.html">ACCEUIL</a> / GESTION CLIENTS</h3>
		</div>
		<img id="right" src="../images/logo_stylise.png" class="img-responsive center-block"/>
	</div>
	<div class="container">
		<div id="firstRow" class="row">
			<div class="col-sm-12"  ng-controller="clientCtrl" style="padding-right:30px;">
				<div id="nouveauClient" style="text-align:center;">
					Créer un nouveau client
				</div>
				<div id="panelNouveauClient">
					<div class="encadre" style="height:130px; min-width: 600px;">
		                <div style="text-align:center;">
		                	<label style="color:#c7b988;">Identité</label><br />
		                </div>
		                <div>
		                	<div id="tablesInlineBlock" style="width:49%;">
		                		<div id="tablesBlock">
		                			<label>Nom</label>
	                			</div>
		                		<div id="tablesBlock" style="min-width: 270px;">
		                			<input type="text" class="form-control" ng-model="client_nom" style="width:200px;"/>
	                			</div>
		                	</div>
		                	<div id="tablesInlineBlock" style="width:50%;">
		                		<div  id="tablesBlock">
		                			<label>Prénom</label>
		                		</div>
		                		<div id="tablesBlock" style="min-width: 250px;">
		                			<input type="text" class="form-control"  ng-model="client_prenom" style="width:200px;"/>
	                			</div>
		                	</div>
		                </div>
	                </div>
	                <div class="encadre" style="min-width: 600px;">
		                <div style="text-align:center;">
		                	<label style="color:#c7b988;">Adresse</label><br />
		                </div>
		                <div>
		                	<div id="tablesInlineBlock" style="width:24%;">
		                		<div id="tablesBlock">
		                			<label>Numéro</label>
	                			</div>
		                		<div id="tablesBlock" style="min-width: 60px;">
		                			<input id="numVoie" type="text" class="form-control"  ng-model="client_numVoie" maxlength="8" style="width:110px;"/>
	                			</div>
		                	</div>
		                	<div id="tablesInlineBlock" style="width:30%;">
		                		<div id="tablesBlock">
		                			<label>Voie</label>
	                			</div>
		                		<div id="tablesBlock" style="min-width: 170px;">
		                			<select id="typeVoie" class="form-control" ng-model="client_typeVoie" style="width:150px;">
					                	<option>Impasse</option>
					                	<option>Route</option>
					                	<option selected="selected">Rue</option>
					                	<option>Autre</option>
					                </select>
	                			</div>
		                	</div>
		                	<div id="tablesInlineBlock" style="width:45%;">
		                		<div  id="tablesBlock">
		                			<label>Nom voie</label>
		                		</div>
		                		<div id="tablesBlock" style="min-width: 250px;">
		                			<input id="nomVoie" type="text" class="form-control" ng-model="client_nomVoie"/>
	                			</div>
		                	</div>
		                </div>
		                <div>
		                	<div id="tablesInlineBlock" style="width:49%;">
		                		<div id="tablesBlock">
		                			<label>Code postal</label>
	                			</div>
		                		<div id="tablesBlock" style="min-width: 90px;">
		                			<input id="codePostal" type="text" class="form-control" ng-model="client_codePostal" maxlength="5" style="width:110px;"/>
	                			</div>
		                	</div>
		                	<div id="tablesInlineBlock" style="width:50%;">
		                		<div  id="tablesBlock">
		                			<label>Ville</label>
		                		</div>
		                		<div id="tablesBlock" style="min-width: 290px;">
		                			<input id="ville" type="text" class="form-control" ng-model="client_ville" style="width:250px;"/>
	                			</div>
		                	</div>
		                </div>
	                </div>
	                <span class="input-group-btn">
	                    <button class="btn btn-default"
	                            ng-click="nouveau_client(client_nom, client_prenom, client_numVoie, client_typeVoie, client_nomVoie, client_codePostal, client_ville);">
	                            Ajouter client
	                    </button>
	                </span>
				</div>
				<table id="tableClients" class="table table-striped">
					<thead>
						<tr>
							<th>Nom</th>
							<th>Prénom</th>
							<th>Adresse</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="client in clients">
							<td style="display: none;" ng-model="idClient">{{client.idClient}}</td>
							<td>{{erreurs.message}}{{client.nom}}</td>
							<td>{{client.prenom}}</td>
							<td>{{client.adresse.numeroVoie + ", " +
                                                                 client.adresse.typeVoie + " " + 
                                                                 client.adresse.nomVoie + " " + 
                                                                 client.adresse.codePostal + " " + 
                                                                 client.adresse.ville}}
							 </td>
							<td>					
								<button class="btn btn-default" ng-click="modifier_client(client.idClient)">Modifier</button>
								<button class="btn btn-danger" ng-click="supprimer_client(client.idClient);">Supprimer</button>
							</td>
						</tr>
				</table>
			</div>
		</div>
	</div>
	<div id="popUpModif" class="popup_block">
        <div style="text-align:center;">
        	<label style="color:#c7b988;">Identité</label><br />
        </div>
        <div>
        	<div id="tablesInlineBlock" style="width:49%;">
        		<div id="tablesBlock" style="display:none">
        			<input type="text" class="form-control" ng-model="client_id" style="width:200px;"/>
       			</div>
        		<div id="tablesBlock">
        			<label>Nom</label>
       			</div>
        		<div id="tablesBlock" style="min-width: 270px;">
        			<input type="text" class="form-control" ng-model="client_nom" style="width:200px;" value="blabla"/>
       			</div>
        	</div>
        	<div id="tablesInlineBlock" style="width:50%;">
        		<div  id="tablesBlock">
        			<label>Prénom</label>
        		</div>
        		<div id="tablesBlock" style="min-width: 250px;">
        			<input type="text" class="form-control"  ng-model="client_prenom" style="width:200px;"/>
       			</div>
        	</div>
        </div>
		<div style="text-align:center;">
        	<label style="color:#c7b988;">Adresse</label><br />
        </div>
        <div>
        	<div id="tablesInlineBlock" style="width:24%;">
        		<div id="tablesBlock">
        			<label>Numéro</label>
       			</div>
        		<div id="tablesBlock" style="min-width: 60px;">
        			<input id="numVoie" type="text" class="form-control"  ng-model="client_numVoie" maxlength="8" style="width:110px;"/>
       			</div>
        	</div>
        	<div id="tablesInlineBlock" style="width:30%;">
        		<div id="tablesBlock">
        			<label>Voie</label>
       			</div>
        		<div id="tablesBlock" style="min-width: 170px;">
        			<select id="typeVoie" class="form-control" ng-model="client_typeVoie" style="width:150px;">
           	<option>Impasse</option>
           	<option>Route</option>
           	<option selected="selected">Rue</option>
           	<option>Autre</option>
           </select>
       			</div>
        	</div>
        	<div id="tablesInlineBlock" style="width:45%;">
        		<div  id="tablesBlock">
        			<label>Nom voie</label>
        		</div>
        		<div id="tablesBlock" style="min-width: 250px;">
        			<input id="nomVoie" type="text" class="form-control" ng-model="client_nomVoie"/>
       			</div>
        	</div>
        </div>
        <div>
        	<div id="tablesInlineBlock" style="width:49%;">
        		<div id="tablesBlock">
        			<label>Code postal</label>
       			</div>
        		<div id="tablesBlock" style="min-width: 90px;">
        			<input id="codePostal" type="text" class="form-control" ng-model="client_codePostal" maxlength="5" style="width:110px;"/>
       			</div>
        	</div>
        	<div id="tablesInlineBlock" style="width:50%;">
        		<div  id="tablesBlock">
        			<label>Ville</label>
        		</div>
        		<div id="tablesBlock" style="min-width: 290px;">
        			<input id="ville" type="text" class="form-control" ng-model="client_ville" style="width:250px;"/>
       			</div>
        	</div>
        </div>
        <div style="margin-top:15px">
        	<span class="input-group-btn">
                <button id="validerModif" class="btn btn-success"
                        ng-click="valider_modification(client_id, client_nom, client_prenom, client_numVoie, client_typeVoie, client_nomVoie, client_codePostal, client_ville);">
                        Valider
                </button>
                <button id="annulerModif" class="btn btn-warning" style="margin-left:15px">
                        Annuler
                </button>
            </span>
        </div>
	</div>
</body>
</html>

javascript :

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
 
// cette ligne crée un nouveau module angular
// le tableau en deuxieme argument contient les
// dépendances a injecter dans ce module
var chezYenApp = angular.module("chezYenApp", []);
 
// Création d'un controlleur "StoreCtrl" dans notre module
// le scope est automatiquement injecté par angular
chezYenApp.controller("clientCtrl", function($scope, $http) {
   $scope.clients = [];
   $scope.clientModif;
 
   $http.get('../gestClients/repertoire').then(function (response) {
       $scope.clients = response.data.clients;
   });
 
   $scope.nouveau_client = function(nom, prenom, numVoie, typeVoie, nomVoie, codePostal, ville){
	   console.log("nouveau client");
	   $http.post('../gestClients/nouveau', {
		   	"clientNom": nom,
		   	"clientPrenom": prenom,
		   	"clientNumeroVoie": numVoie,
		   	"clientTypeVoie": typeVoie,
		   	"clientNomVoie": nomVoie,
		   	"clientCodePostal": codePostal,
		   	"clientVille": ville
		   }).success(function(response) {
			   $scope.clients.push(response.client);
		   }).error(function(response){
			   $scope.erreurs.push(response.erreurs);
		   });
   };
 
   $scope.supprimer_client = function(idClient){
	   console.log("supprimer_client id : " + idClient);
	   $http.post('../gestClients/supprimer', {
	   "clientID": idClient
	   }).then(function successCallback(response) {	  
		   	console.log("succes suppression client");
		    $scope.clients = response.data.clients;
	   }, function errorCallback(response) {
		  	console.log("problème suppression client");
	   });
   };
 
   $scope.modifier_client = function(idClient) {
	   console.log("modifier_client id : " + idClient);
	   $http.post('../gestClients/modifier', {
		   "clientID":idClient
	   }).then(function successCallbak(response){
		   	$scope.clientModif = response.data.client;
		   	console.log("succes modification client - nom : " + $scope.clientModif.nom);
 
		   	var popID = 'popUpModif'; //la pop-up correspondante
		   	var largeur_fenetre = $(window).width();
		   	if(largeur_fenetre < 1500){
				var popWidth = largeur_fenetre - largeur_fenetre * 0.1; //la largeur
		   	} else {
				var popWidth = largeur_fenetre - largeur_fenetre * 0.3; //la largeur
		   	}
 
			//Faire apparaitre la pop-up et ajouter le bouton de fermeture
			$('#' + popID).fadeIn().css({
				'width': Number(popWidth)
			});
 
			//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
			var popMargTop = ($('#' + popID).height() + 80) / 2;
			var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
			//On affecte le margin
			$('#' + popID).css({
				'margin-top' : -popMargTop,
				'margin-left' : -popMargLeft
			});
 
			//Effet fade-in du fond opaque
			$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
			//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
			$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
			//Fermeture de la pop-up et du fond
			$('a.close, #annulerModif, #validerModif').on('click', function() { //Au clic sur le bouton ou sur le calque...
			   	$('#fade , .popup_block').fadeOut(function() {
			   		$('#fade, a.close').remove();  //...ils disparaissent ensemble
			   	});
			   	return false;
			});
 
			return false;
 
	   }, function errorCallback(response){
		   console.log("problème modification client");
	   });
   }
 
   $scope.valider_modification = function(id, nom, prenom, numVoie, typeVoie, nomVoie, codePostal, ville) {
	   console.log("Valider modification");
	   $http.post('../gestClients/valider_modification', {
		   	"clientId": id,
		   	"clientNom": nom,
		   	"clientPrenom": prenom,
		   	"clientNumeroVoie": numVoie,
		   	"clientTypeVoie": typeVoie,
		   	"clientNomVoie": nomVoie,
		   	"clientCodePostal": codePostal,
		   	"clientVille": ville
		   }).success(function(response) {
			   $scope.clients = response.data.clients;
		   }).error(function(response){
			   $scope.erreurs.push(response.erreurs);
		   });
   }
 
// $scope.addNewTask2 = function(libelle, category) {
//    j'envoie une requette POST pour demander au serveur de creer la tache en BDD
//   $http.post('../rest/savetache2', {"tacheLibelle": libelle, "tacheCategory" : category} 
//    ).success(function(response) {
//         cette fonction est rappellée quand le serveur renvoie sa réponse
//         le serveur nous renvoie la tache insérée sous format JSON
//         angular désérialise le json dans response.data
//         nous ajoutons la tache insérée dans le tableau des taches du scope
//       $scope.taches.push(response.tache);
//    }); 
// };
 
});
 
//$scope.incompleteCount = function() {
//var count = 0;
//angular.forEach($scope.produits, function(t) {
//  if (!t.completed) {
//      count++;
//  }  
//});
//return count;
//};
 
//$scope.warningLevel = function() {
	//if ($scope.incompleteCount() < 3 ) {
	//   return "label-success";  
	//}
	//else {
	//   return "label-warning";
	//}
//};
 
// filter prend en parametre le nom du filtre, et la fonction
// "factory" fabrique de la fonction filtre
//chezYenApp.filter("completedTask", function() {
//    // 2 parametres , la collection sur laquelle on travaille
//    // un parametrage du filtre (ici un boolean pour determiner le filtrage)
//   return function (items, showComplete) {
//       var resultItems = [];
//       angular.forEach(items, function(item) {
//          if (item.completed == false || showComplete == true) {
//              resultItems.push(item);
//          }
//       });
//       return resultItems;
//   };
//});

Merci à vous de bien vouloir m'aider.

**NoSmoking** · 28/05/2016, 10h27

Bonjour,
ton élément <button id="validerModif" class="btn btn-success" n'est pas dans ton élément contrôleur <div class="col-sm-12" ng-controller="clientCtrl".

**francky74** · 28/05/2016, 12h07

Bonjour et grand merci !

Effectivement, cela fonctionne mieux lorsque j'insère dans le ng-controller !

PS : par contre, je rencontre un nouveau problème pour afficher les données. Je vais ouvrir un nouveau post !

ng-click - fonction non appelée

AngularJS

Discussions similaires

Partager

Partager