Bonjour à tous,

j'essaie de faire une appli. web pour m'autoformer et je bloque sur un petit problème avec AngularJs. Peut-être pourrez-vous m'aider .

J'ai une master page en trois parties avec un header, une page content et un footer.

Lorsque je lance mon appli. sur un serveur tomcat, la page d'acceuil s'ouvre avec mes trois parties et en "content" j'ai ma page login.html.

Le problème est le suivant :

j'ai des buttons dans mon login.html pour gérer l'internationalisation qui fonctionnent très bien :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
<!-- le code dans login.html -->
 
<img src="assets/images/buttons/flags/france2.png" class="classFlag" onclick="changeLang('fr');" ng-click="internationalization()"></img>
 
<img src="assets/images/buttons/flags/royaumeUni2.png" class="classFlag" onclick="changeLang('en');" ng-click="internationalization()"></img>
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
 
// mon module javascript
 
eModule.controller('LoginCtrl',function($scope, loginService, $location){
 
	// [...]
 
	$scope.internationalization = function(){
		var tmpLang = localStorage.getItem("lang");
		if(tmpLang == "fr"){
			$scope.lbSignIn = "Identifiez-vous";
			$scope.lbLogin = "Identifiant";
			$scope.lbPwd = "Mot de passe";
			$scope.lbRemember = "Rester connect�";
			$scope.lbSubmit = "Connexion";
			$scope.lbReturn = "Retour au catalogue";
		}else{
			$scope.lbSignIn = "Sign in";
			$scope.lbLogin = "Login";
			$scope.lbPwd = "Password";
			$scope.lbRemember = "Remember me";
			$scope.lbSubmit = "Sign in";
			$scope.lbReturn = "Back to catalog";
		}
	};
 
});
mais si je déplace ces buttons dans le header, ils ne fonctionnent plus.

Je ne comprend pas pourquoi il fonctionne dans la partie content, mais pas dans le header. Je soupçonne un problème de scope mais bon...

Voici le code de ma master page (avec les buttons) :

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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>eCollection</title>
 
<!-- JQUERY doit être chargé avant ANGULARJS -->
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.css">
 
<!-- ANGULARJS -->
<script type="text/javascript" src="angular/angular.js"></script>
<script type="text/javascript" src="angular/angular-route.js"></script>
<script type="text/javascript" src="angular/angular-resource.js"></script>
 
<script type="text/javascript" src="js/modules.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/factories.js"></script>
<script type="text/javascript" src="js/routeConf.js"></script>
 
<!-- BOOTSTRAP -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
 
<!-- MASTER_PAGE -->
<script type="text/javascript" src="js/masterHeader.js"></script>
<link rel="stylesheet" type="text/css" href="css/masterHeader.css">
<link rel="stylesheet" type="text/css" href="css/masterContent.css">
<link rel="stylesheet" type="text/css" href="css/masterFooter.css">
 
</head>
 
<body ng-app="eModule">
 
	<header id="masterHeader">
 
		<table id="tabMasterHeader">
			<tr>
				<td id="tdLogo">
					<img alt="logo1" src="assets/images/logos/logoMasterPage.png" id="imgLogo">
				</td>
				<td id="tdTitle">
 
					<table id="tabFlags">
						<tr>
							<td class="tdFlag">
								<img src="assets/images/buttons/flags/france2.png" class="classFlag" onclick="changeLang('fr');" ng-click="internationalization()"></img>
							</td>
							<td class="tdFlag">
								<img src="assets/images/buttons/flags/royaumeUni2.png" class="classFlag" onclick="changeLang('en');" ng-click="internationalization()"></img>
							</td>
							<td class="tdFlag">
								<img src="assets/images/buttons/flags/espagne2.png" class="classFlag" onclick="changeLang('es');" ng-click="internationalization()"></img>
							</td>
							<td class="tdFlag">
								<img src="assets/images/buttons/flags/allemagne2.png" class="classFlag" onclick="changeLang('de');" ng-click="internationalization()"></img>
							</td>
						</tr>
					</table>
 
				</td>
			</tr>
		</table>
 
	</header>
 
	<div ng-view id="masterContent"></div>
 
	<footer id="masterFooter">
		&copy; AUTOFORMATION - Created by Paladice
	</footer>
 
</body>
 
</html>
Merci d'avance pour votre aide.