1 pièce(s) jointe(s)
[ui-router] Utilisation de la directive ui-sref
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:
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 :
Pièce jointe 332010
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:
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:
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:
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:
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 !!! :P
