Discussion :

[louis.enzo]

Bonjour à tous,

je suis vraiment perplexe, et j'espère que quelqu'un pourra m'aider.

je construit une division "slide Pager" qui est dynamiquement construite selon la taille que je la donne dans une fonction JavaScript, voici a ce que ressemble:


mais le problème c'est que j'attribue a chaque élément un événement |onclick="$scope.function()"| voici comment :

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
angular.module('MyApp', ['services']).controller('MyCtrlG', function($scope, $http, Logger) {
	$scope.afficherPage=function(x){
		 console.log("chui làà");
	}
}
$scope.setPager=function(x){
	var ul = document.getElementById('pager');
	$scope.RemoveAllChild('pager');
	var fp = document.createElement('li');
	var lp = document.createElement('li');
	var prev = document.createElement('li');
	var next = document.createElement('li');
	fp.setAttribute('class','first-page');
	fp.innerHTML = '<a onclick="$scope.afficherPage(\'fp\')" href="#">&laquo;</a>';
	ul.appendChild(fp);
	prev.innerHTML = '<a onclick="$scope.afficherPage(\'prev\')" href="#" >&lsaquo;</a>';
	ul.appendChild(prev);
	n=x;     if(n>10) n=10;
	for (var i = 1; i <= n; i++) {
		var li = document.createElement('li');
		if(i==1) li.setAttribute('class','active');
		li.innerHTML = '<a onclick="$scope.afficherPage('+i+')" href="#" >'+i+'</a>';
		ul.appendChild(li);
	}
	if(x>10){
		var li = document.createElement('li');
		li.innerHTML = '<p>.....</p>';
		ul.appendChild(li);
	} 
	next.innerHTML = '<a onclick="$scope.afficherPage(\'next\')" href="#">&rsaquo;</a>';
	ul.appendChild(next);
	lp.setAttribute('class','last-page');
	lp.innerHTML = '<a onclick="$scope.afficherPage(\'lp\')" href="#">&raquo;</a>';
	ul.appendChild(lp);
	return x;
}	    
});

jusqu'à ici tout est parfait, mais quand je clique sur l'un des élément qui s'est apparait une erreur se déclenche on me disant "Uncaught ReferenceError: $scope is not defined"

et j'essayais appeler ma fonction afficherpage() de différent manière:

Code :

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

1
2
3
4
 li.innerHTML = '<a onclick="$scope.afficherPage('+i+')" href="#" >'+i+'</a>';  // "Uncaught ReferenceError: $scope is not defined"
 li.innerHTML = '<a onclick="afficherPage('+i+')" href="#" >'+i+'</a>';            // "Uncaught ReferenceError: afficherPage() is not defined"
 li.innerHTML = '<a ng-click="$scope.afficherPage('+i+')" href="#" >'+i+'</a>'; // rien ne s'affiche ni erreur ni résultat 
 li.innerHTML = '<a ng-click="afficherPage('+i+')" href="#" >'+i+'</a>';           // rien ne s'affiche ni erreur ni résultat

merci pour tout réponse.

[slim]

Salut,

$scope n'est pas à utiliser dans les templates (html), que dans les controleurs.
Et ton code pique un peu... je te conseillerais de faire les tutoriaux du site officiel : tuto angularjs.org

[rioll]

au lieu de sa:

Code :

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

li.innerHTML = '<a onclick="$scope.afficherPage('+i+')" href="#" >'+i+'</a>';

essai sa:

Code :

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

li.innerHTML = '<a onclick="afficherPage('+i+')" href="#" >'+i+'</a>';

Et ton onclick tu peux le remplacer par ng-click...qui appartient a angular..

[slim]

Ce n'est pas la peine de construire le html (le template) en javascript. Pourquoi ne pas l'écrire directement dans du html et afficher les portions qui t'intéressent selon des conditions (ng-if, ng-show...) ?
De plus, pour ton besoin, il existe de nombreuses directives pour la pagination (que ce soit pour des tableaux de données ou autres).

[Marco46]

1- Le controler ne doit servir qu'à binder les données dans le scope et les instances des services (les services doivent contenir 95% de la logique de ton appli)
2- On ne doit pas implémenter de fonctions dans le scope mais dans les services car implémenter dans le scope rend ce code non testable et difficilement mutualisable
3- On ne modifie jamais le DOM dans un controler (rôle des directives).