Discussion :

[francky74]

Bonjour,

le contexte :
J'ai une <div> à droite et une <div> à gauche.
Dans la <div> de gauche j'ai une liste de liens qui, lorsqu'on les cliques, feront apparaître une photo dans la fenêtre de droite. Les deux <div> se trouvent dans un template inséré dans une ui-view.

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Ce template est inséré dans une ui-view -->
<div id="produits_body">
	<div id="produits_gauche">
		<div id="produits_titre_gauche">Liste</div>
 
		<!-- Les données sont dans datas.js -->
		<ul ng-repeat="photo in liste_photos">
			<li><a ui-sref="produits_photos({photo.id})">{{photo.titre}}</a></li>
		</ul>
	</div>
 
	<div id="produits_droite" ui-view="produits_photos"></div>
</div>

Voici ce que ça donne visuellement :


Je bloque sur la chose suivante :

J'ai une liste de liens cliquables qui sont en fait des balises <a> dans lesquelles je souhaite mettre des ui-sref et passer un paramètre dans l'état (ou le 'state' si vous préférez ...).

Code HTML :

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

1
2
3
<ul ng-repeat="photo in liste_photos">
		<li><a ui-sref="produits_photos({photo.id})">{{photo.titre}}</a></li>
	</ul>

Du côté .js, j'ai une déclaration d'état comme voici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
 
	$stateProvider
        .state('produits_photos', {
 
		url: '/produits_photos/:prod_photo_id',
		views: {
			'produits_photos':{
				templateUrl: 'produits_photos.html',
				controller: 'produits_photosCtrl'
			}
		}
	})
//...etc

Donc je souhaite envoyer l'id de la photo au controller 'produits_photosCtrl', qui doit me choisir la photo en fonction de l'id et retourner l'url de la photo afin qu'elle soit affichée.

et voici le controller :

Code :

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

1
2
3
4
5
6
7
8
app.controller('produits_photosCtrl', ['$scope', '$stateParams', 
	function($scope, $stateParams){
		console.log("produits_photosCtrl");
 
		$scope.produit_photo = $filter('filter')(liste_photos, {id:$stateParams.prod_photo_id})[0];
 
		console.log("photo : " + $scope.produit_photo);
}]);

Voici la liste des photos pour info, elle se trouve dans un fichier data.js :

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
var liste_photos = [
  {
    "id":1,
    "titre":"nems au porc",
    "path":"../photos/1"
  },
  {
    "id":2,
    "titre":"nems au poulet",
    "path":"../photos/2"
  },
  {
    "id":3,
    "titre":"nems aux crevettes",
    "path":"../photos/3"
  },
  {
    "id":4,
    "titre":"samoussas",
    "path":"../photos/4"
  }
];

Mon problème :
Lorsque je clique sur un lien de la liste, le débug ne rentre pas dans le "produits_photosCtrl" et le template disparait.
Par contre, l'url est bien faite puisqu'elle affiche bien le state (ou l'état si vous préférez) et l'id de la photo qui a été cliqué. par exemple ici l'id 4 -> .....index.html#/produits_photos/4

Donc j'ai l'impression que c'est dans la configuration du state que ça cloche mais je ne vois pas trop quoi !?!

Merci pour votre aide !!!