Tuto Ionic. Comment passer une variable d'une vue à un controller

Par FactureHero.com, il y a 10 ans

Javascript

Toujours suite au tuto sur IONIC qui est top. J'essaye de passer une variable de la vue au controller au click de l'utilisateur sur un lien.

Le bout de code qui pourrait être celui-là dans une vue qui listerait des articles :

<ion-view view-title="Liste des articles"> <ion-content class=''> <div class="list"> <a ng-repeat="data in posts" class="item item-thumbnail-left"> <img ng-src="{{data.urlimage}}"> <h2>{{ data.title }}</h2> </a> </div> </ion-content> </ion-view>

Je voudrai, au clic de l'utilisateur, passer une variable $id en paramètre du lien, et récupérer cet id dans un controller du fichier app.js afin d'afficher l'article qui a cet id.
Comment dois-je m'y prendre ? Avec un " ui-sref " ?
Je précise que côté router, j'évolue comme dans le TUTO IONIC, avec Angular UI router.

Merci pour vos lumières. Il faut vraiment que je me mette à Angular :)

11 réponses

Maenhyr, il y a 10 ans

Salut, cette page te sera pas mal utile pour ton besoin : https://github.com/angular-ui/ui-router/wiki/URL-Routing.

Tu rajoutes un parametre url dans ton systeme de routage, et tu mets ton ui-sref dans ta vue avec la variable. Ensuite tu peux recuperer ta variable grace a $stateParams dans ton controller.

FactureHero.com, il y a 10 ans

Bien. Après m'être penché sur la formation AngularJS, je suis enfin parvenu à transmettre une variable d'un lien cliqué à un autre controller. C'est sûrement très simple pour qui connaît Angular mais j'ai eu un peu de mal à comprendre le principe. Je donne mon petit code si ça peut servir à quelqu'un.

Le but était de récupérer une variable ID et de la transmettre à un controller qui lui fait un appel ajax sur une url qui contient cet ID (le but étant d'afficher un article depuis une page qui liste les articles.

1 / Dans la vue "posts" qui liste les articles je passe les directives ng-model et ng-click qui contient ma variable ID

<a ng-repeat="data in posts" ng-click="search({{data.ID}})" ng-model="id" class="item item-thumbnail-left" > <h2>{{ data.title }}</h2> </a>

2 / Dans son controller "PostsCtrl" je récupère la valeur ID avec $scope et je l'envoie à l'autre controller de l'article seul ("PostCtrl")

.controller('PostsCtrl', function($scope,$state, $ionicLoading, $stateParams, $http){ $scope.search = function(idPassedFromNgClick){ // console.log(idPassedFromNgClick); $state.go('thepost', {id: idPassedFromNgClick}) } })

3/ Et enfin je récupère cette donnée dans le controller PostCtrl avec $stateParams

.controller('PostCtrl', function($scope,$ionicLoading, $stateParams, $http){ url = "http://monsupersite.fr//wp-json/posts/"+ $stateParams.id +""; $ionicLoading.show({template: 'Chargement...'}); $http.get(url).success(function(response) { $ionicLoading.hide(); $scope.post=response; }) })

Pour finir j'envoie la réponse à la vue post.html et j'affiche les données de l'article;

Une solution qui marche. En revanche, je ne suis pas certain que ce soit la plus économique en matière performance car je récupère déjà les données de l'article seul dans la page qui liste tous les articles. Je fais donc 2 appels à l'API, une fois pour lister les articles et une fois pour l'article seul. A optimiser donc ;)

Merci pour les pistes @prbaron;

en espérant que ça pourra servir à d'autres.

Alfred Mugnerot, il y a 9 ans

Bonjour, je souhaite recuperer une variable comme vous mais je n'y arrive pas. Ma console me dit que ma variable est vide et le ng-clic ne fait pas changer la vue.
Si vous avez un peu de temps pour m'expliquer un peu mieu car je débute et pour le passage de variable je ne comprend pas bien.
Merci

Alfred Mugnerot, il y a 9 ans

Je suis arrivé à faire changer la vue mais maintenant j'ai l'impression que le stateparams n'envoie pas la bonne valeur :
erruer console

or: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: chat in chats, Duplicate key: string:<, Duplicate value: < http://errors.angularjs.org/1.5.3/ngRepeat/dupes?p0=chat%20in%20chats&p1=string%3A%3C&p2=%3C at ionic.bundle.js:13415 at ngRepeatAction (ionic.bundle.js:42146) at $watchCollectionAction (ionic.bundle.js:30081) at Scope.$digest (ionic.bundle.js:30216) at Scope.$apply (ionic.bundle.js:30480) at done (ionic.bundle.js:24801) at completeRequest (ionic.bundle.js:24999) at XMLHttpRequest.requestLoaded (ionic.bundle.js:24940)
Defy, il y a 9 ans

C'est marqué que tu doit utiliser un track by dans ton ng-repeat du style

<a ng-repeat="data in posts track by $index" ></a>

je te renvoie à la doc ngRepeat

Alfred Mugnerot, il y a 9 ans

Merci de ta réponse. En faite mon problème viens d'ailleurs puisque c'est quand je veux recuperer ma variable dans mon deuxième controlleur il n'y a rien dedans. Peut être ai je oublier de definir un service au debut du code :
voici :

//le premier controlleur .controller('contactsCtrl', function($scope, $http, $stateParams, $state) { $scope.doRefresh = function() { $scope.$broadcast('scroll.refreshComplete'); }; $http.get('js/data/contact.php').then(function(response) { $scope.contacts = response.data; }); $scope.search = function(idPassedFromNgClick){ // console.log(idPassedFromNgClick); $state.go('detail', {id: 1}) } }) //puis le deuxième .controller('messagesDetail', function($scope,$ionicLoading, $stateParams, $http) { $http.post('js/data/chat.php',{'id':$stateParams.id}).then(function(response) { $scope.chats = response.data; }); })

Merci pour ton aide

Defy, il y a 9 ans

la ligne de ton erreur vient de la pourtant

or: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: chat in chats, Duplicate key: string:<, Duplicate value: <

et je sais pas si tu as fait attention mais tu as un lien dans l'erreur https://docs.angularjs.org/error/ngRepeat/dupes?p0=chat%20in%20chats&p1=string:%3C&p2=%3C qui t'amene tous droit dans la doc de angular pour expliquer ton soucie

fait voir le code html lié a tes controlleurs aussi

Alfred Mugnerot, il y a 9 ans

Pour faire un essaie j'ai voulu passer une variable forcé le id : '1' :

Je ne reçois rien en parametre quand j'inspecte le code avec chrome.

.controller('contactsCtrl', function($scope, $http, $stateParams, $state) { $scope.doRefresh = function() { $scope.$broadcast('scroll.refreshComplete'); }; $http.get('js/data/contact.php').then(function(response) { $scope.contacts = response.data; }); $scope.search = function(idPassedFromNgClick){ // console.log(idPassedFromNgClick); $state.go('detail', {id: '1'}) } }) .controller('messagesDetail', function($scope,$ionicLoading, $stateParams, $state, $http) { $http.post('js/data/chat.php',{'id':$stateParams.id}).then(function(response) { $scope.chats = response.data; }); }) <ion-content> <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"></ion-refresher> <div class="bar bar-header item-input-inset" ng-show="searchkey"> <label class="item-input-wrapper"> <i class="icon ion-ios-search placeholder-icon"></i> <input type="search" placeholder="Search" ng-model="search"> </label> </div> <ion-list> <a ng-repeat="contact in contacts" ng-click="search({{contact.idutilisateur}})" ng-model="id" class="item item-thumbnail-left" > <h2>{{contact.idutilisateur}} {{contact.prenom}} {{contact.nom}}</h2> </a> </ion-list> </ion-content>
Alfred Mugnerot, il y a 9 ans

Finalement j'ai résolu le probleme ...

Je n'avais pas mis le "/:id en parametre car je pensais qu'en post il n'y en avait pas besoin . Mais aparementle probleme venait de là. Je suis ouvert à toute suggestions si il y avait une meilleur solution.
Dans tous les cas un grand merci pour ton aide

.state('detail', { cache: false, url: '/messages/detail/:id', templateUrl: 'templates/messages/detail.html', controller: 'messagesDetail' })
Defy, il y a 9 ans

c'est exact, il est obligatoire, que cela soit en post ou en get l'id doit etre présent dans l'url pour etre recupéré par $stateParam

Alfred Mugnerot, il y a 9 ans

Merci beaucoup pour l'aide ça permet d'avancer plus vite.