Comment organiser mon data binding

Bonjour,

Je développe actuellement une application de cartographie sous AngularJS.

J'ai trois zones distinctes :

* Une carte Google Map avec des polygones représentant des départements
* Un formulaire reprenant la liste de mes départements
* Un panier reprenant la liste des départements sélectionnés

J'aurais besoin d'un conseil sur la façon dont je dois organiser mon code pour tout relier ensemble :

* Lorsque je clique sur un département ça doit me le colorer en vert, me le sélectionner dans mon formulaire et me le rajouter dans mon panier
* Lorsque je reclique sur le même département ça doit me le colorer en rouge, me le désélectionner dans mon formulaire et me le supprimer du panier
* Lorsque je sélectionne un département dans mon formulaire ça doit me le colorer en vert sur ma carte et me le rajouter dans mon panier
* Lorsque je désélectionne le département dans mon formulaire ça doit me le colorer en rouge sur ma carte et me le supprimer de mon panier
* Lorsque je supprime un département dans mon panier ça doit me le colorer en rouge sur ma carte et me le désélectionner dans mon formulaire.

J'ai vu qu'il fallait utiliser du data binding mais je n'arrive pas à voir comment m'y prendre pour relier ma carte, mon formulaire et mon panier.

https://docs.angularjs.org/guide/databinding

Je ne demande pas que l'on code à ma place, juste que l'on m'explique comment m'y prendre avec les outils qu'angular met à ma disposition.

Pour l'instant j'ai créé :

* une directive pour afficher ma carte (ça fonctionne)
* un controller relié à mon menu général pour afficher mes départements et les rendre cliquables (ça fonctionne aussi)
* une zone formulaire HTML où je souhaiterais proposer de sélectionner les départements à partir de celui-ci (ça ne marche pas)
* une zone panier HTML où je souhaiterais afficher un récapitulatif des départements que j'ai sélectionnés sur ma carte ou dans mon formulaire (ça ne marche pas)

Quelqu'un pourrait-il me mettre sur la voie pour relier tout ça ensemble ?

Merci d'avance

Personnellement, j'irais sur cette piste en Angular 1.5:

Soit $scope.departementsSelectionnes un tableau d'objets Json qui ressemble à ça, dans ton controleur :

Code:

---

1 2 3 4 5 6

$scope.departementsSelectionnes = [ {"departement":75}, {"departement":95}, {"departement":12} ]

---

Alors, quand tu cliques sur un departement, ça doit exécuter la fonction suivante qui ajoute au tableau Json le departement sélectionné :

Code:

---

1 2 3 4

$scope.ajouterDepartement = function (departementChoisiDansLaVue){ $scope.departementsSelectionnes.push({"departement":departementChoisiDansLaVue}); }

---

De même si tu recliques pour le supprimer du tableau d'objet Json, ça doit exécuter la fonction splice() dans ton contrôleur, mais elle est un peu plus compliquée à faire, parce que il faut retrouver l'objet departement à supprimer en fonction du numéro de departement dans le tableau Json pour le supprimer, mais ça doit être possible, moi j'ai que l'idée d'à la barbare avec une boucle for(C'est pas la bonne pratique, et j'ai pas testé mais ça peut ressembler à ça,mais là ça ne marche peut etre pas, parce que la fonction splice fonctionne pas trop comme ça en fait) :

Code:

---

1 2 3 4 5 6 7 8

$scope.supprimerDepartement = function (departementChoisiDansLaVue){ var x = 0; for (x=0;x<$scope.departementsSelectionnes.length;x++){ if($scope.departementsSelectionnes[x].departement==departementChoisiDansLaVue){ $scope.departementSelectionnes.splice(x,1); } }

---

N'utilises surtout pas le scope pour ça, utilise des services. Je vois que la leçon a été retenue par devwebsympa ça fait plaisir de voir que quand on prend du temps pour aider les gens ça sert.

Il est opère en temps réel sur la carte, du coup le $scope me semble approprié.
il stockera après dans son service de data, une fois que l'utilisateur aura choisi l'intégralité de ses départements ... ?

Je suis d'accord que les services, c'est super, mais là, sa carte est modifiée en temps réel, il doit donc stocker les variables Département dans un tableau JSON en temps réel en attendant la fin du choix de l'utilisateur.
Enfin bah moi je ferais comme ça, après je n'ai pas 6 ans d'expérience sur AngularJs1.5(Le meilleur framework JS :ptdr:)! Merci :mrgreen:

Ensuite lorsqu'il voudra recharger sa carte avec ses départements sélectionnés, là il écrira une chose de ce style :
$scope.departementsSelectionnes = serviceDepartements.getDepartements();
Et le service ira requêter sur son Back End.

Je suis tout à fait d'accord qu'il faut créer un service, je donnais juste une idée, relative à son problème de temps réel, AngularJs 1.5 excellant dans le traitement en temps réel.

Bonjour,

Je ne sais pas si j'ai bien fait mais voici comment je m'y suis pris.

J'ai créé un contrôleur que j'ai rattaché à mon formulaire et dans lequel j'ai mis :

Code:

---

1 2 3 4 5 6

$scope.secteurs_geo = []; $scope.type_de_secteur = 'Choisir mode découpage'; $rootScope.$on("CallUpdateSecteursGeo", function(event, titre, secteurs){ $scope.type_de_secteur = titre; $scope.secteurs_geo = secteurs; });

---

Dans mon autre contrôleur je clique sur un menu afin de charger les départements :

Code:

---

$rootScope.$emit("CallUpdateSecteursGeo", 'Régions', polygones);

---

Tout se charge bien et mes checkboxes sont cochées pour les départements qui ont la valeur checked à true :

Code:

---

1 2 3 4

options.checked = true; polygones[polygones.length] = CartoBundleMap.setPolygon(options, 'click', function (event) { this.checked = !this.checked; ...

---

Lorsque je vérifie le statut d'un de mes départements j'ai bien le statut de l'option checked :

Code:

---

1 2	angular.element($0).scope().secteurs_geo[0].checked; true

---

Lorsque je clique sur un département l'option checked passe bien à false.

Code:

---

1 2	angular.element($0).scope().secteurs_geo[0].checked; false

---

Lorsque je coche ou décoche le même département à partir du formulaire, encore une fois le modèle se met à jour correctement :

Code:

---

1 2	angular.element($0).scope().secteurs_geo[0].checked; true

---

Par contre ma case ne se coche/décoche jamais toute seule ?
Mon modèle est bien mis à jour mais ma case reste telle qu'elle est apparue au début, c'est à dire soit coché soit décochée mais elle ne change pas ?
J'ai pourtant bien vérifié que ce soit le même objet qui se met à jour et c'est bien le même :

Code:

---

1 2 3 4 5 6 7

_.pe {gm_accessors_: Object, latLngs: _.yc, gm_bindings_: Object, strokeColor: "#000000", strokeOpacity: 1…} $$hashKey : "object:5" S : Bg

---

Je voudrais que ça fonctionne avant d'essayer de passer avec des services mais pour l'instant c'est un peu obscur pour moi.

Pouvez-vous m'aider svp ?

Edit : Ha oui j'ai quand même oublié le plus important :

Code:

---

<li ng-repeat="c in secteurs_geo"><a href="#"><input type="checkbox" ng-model="c.checked"> {[{c.name}]}</a></li>

---

Ce que je ne comprends pas c'est que si je fais :

Code:

---

1 2	> angular.element($0).scope().secteurs_geo[0].checked; <. false

---

Et si je le met à jour :

Code:

---

1 2	> angular.element($0).scope().secteurs_geo[0].checked = true <. true

---

Ma case ne se coche pas quand même ?

Bonjour,

Je clos la discussion car j'ai trouvé pourquoi ça ne marchait pas.

Donc d'abord merci pour votre aide, j'ai réorganisé mon application comme indiqué, c'est à dire en mettant mes données dans des services que je peux utiliser un peu partout à travers mon application, c'est plus facile.

En fait mes polygones sur ma carte étaient bien observés par mon contrôleur mais celui-ci n'était pas notifié de leur changement d'état car ils étaient en dehors du scope. J'ai dû rajouter à ma fonction de rappel :

Code:

---

$scope.$apply();

---

A partir de là tout fonctionne à merveille.

En espérant que ça pourra aider quiconque tomberait sur ce post avec un problème similaire.