Mise à jour de la vue lorsque le model est modifié

Bonjour à tous,


je débute avec AngularJS,
je pense utiliser cette API pour un de mes sites web, mais je rencontre une difficulté avec cette API.

je m'explique :
je possède un objet javascript 'listFiles' qui est une liste d'objets javaScript.

j'arrive très bien à afficher ma liste d'objets sur ma page web (jusque là rien de bien compliquer).
seulement mon objet 'listFiles' peut être amené à changer (par l'intermédiaire d'autres fonctions) et là je bloc, je ne voit pas comment mettre à jour ma vue.
bien sûre je ne veux pas mettre ma vue à jour manuellement (avec l'appel d'un fonction lorsque la liste est modifiée) mais je voudrais que la vue se mette automatiquement à jour lorsque mon objet 'listFiles' est modifié.

je fais donc appel à vous, car j'ai pas mal cherché et je n'ai pas encore trouvé de bonnes informations à ce sujet.
est-il possible de faire cela avec Angularjs ?? (il me semble que oui puisque justement la force d'angularJS semble être la mise en place de modele MVC)
si oui, pouvez-vous me donner des informations sur cette fonctionnalité, (mot clé ou autre qui puisse me permettre de mieux cibler mes recherches) ?

Bonjour.

Pour afficher ton objet, je suppose que tu utilises l'instruction ng-repeat ou ng-model
En ce cas, si tu fais un appel ajax sur ton objet pour le mettre à jour, en théorie, Angular va remettre toute ta vue à jour tout seul, il n'y a rien à faire.

J'utilise moi-mêm angular et c'est une tuerie, ça marche d'enfer , c'est trop bien et révolutionnaire.:mrgreen:

Citation:

---

Envoyé par MoumouteMasters

Bonjour.

Pour afficher ton objet, je suppose que tu utilises l'instruction ng-repeat ou ng-model
En ce cas, si tu fais un appel ajax sur ton objet pour le mettre à jour, en théorie, Angular va remettre toute ta vue à jour tout seul, il n'y a rien à faire.

J'utilise moi-mêm angular et c'est une tuerie, ça marche d'enfer , c'est trop bien et révolutionnaire.:mrgreen:

---

voici mon exemple :

la partie html :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<div ng-controller="FilesListCtrl as files"> <ul> <li ng-repeat="file in files"> <span>{{file.name}}</span> <p>{{file.size}}</p> </li> </ul>   <button id="addAction">click ici pour modifier ma variables</button> </div>

---

et la partie javascript :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var phonecatApp = angular.module('filesApp', []);   var listFiles = [ { 'name': 'file 1', 'size': 43, }, { 'name': 'file 2', 'size': 78, } ];       phonecatApp.controller('FilesListCtrl', function ($scope) {   $scope.files = listFiles;   });

---

dans cette exemple j'ai ajouté un bouton qui modifie ma variable listFiles

Code:

---

1 2 3 4 5 6 7

$("#addAction").click(function() { console.log(listFiles); console.log("add action called"); listFiles[0].name='file modified'; console.log(listFiles);   });

---

(mais dans ma vraie application cette variables est modifié par un appel à l'API dropbox)

j'utilise bien ng-repeat pour afficher ma liste mais lorsque ma varible est mise à jour (par le bouton dans cette exemple) ma vue n'est pas mise à jour.
je precise que je ne souhaite pas utiliser ng-clik, l'action ici est juste pour ilustrer mon exemple, normalement ma varibles listFiles est modifié par le retour d'un appel à l'API dropbox)

Citation:

---

je precise que je ne souhaite pas utiliser ng-clik

---

Tu souhaites utiliser Angular, mais tu ne souhaites pas utiliser les fonctions d'Angular ???

ng-click se serait chargé de faire la mise à jour automatique pour toi. Mais si tu ne veux pas l'utiliser pour une raison X ou Y, tu dois lancer la mise à jour manuellement avec un $scope.$apply:

Code:

---

1 2 3 4 5 6 7 8

$("#addAction").click(function() { $scope.$apply(function () { console.log(listFiles); console.log("add action called"); $scope.files[0].name='file modified'; console.log(listFiles); }); });

---

Je ne souhaite pas utiliser nb-click car dans la réalité je n'ai pas de bouton pour modifier ma variable, comme expliqué précédemment, ma variable listFiles est modifiée par un appel à l'API dropbox (j'espère que mon explication est claire :( ).

pour plus de precision, voici mon code plus en détails:

la vue html:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<div ng-app="dropboxFilesApp">     <div ng-controller="DropboxFilesControl as files">   <ul> <li ng-repeat="file in files">{{file.name}}</li> </ul>   </div>   </div>

---

la partie JS:

Code:

---

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

var phonecatApp = angular.module('dropboxFilesApp', []);     phonecatApp.controller('DropboxFilesControl', function ($scope) {       /* dropbox initialization */ var dropbox = new DropboxConnector('*************'); dropbox.init(); dropbox.checkAuthentication(); dropbox.authenticateClient();     dropbox.listContent(function(a){ console.log("a = "+a); console.log("b = "+a.length);   $scope.$apply(function () { $scope.files = a; });     });   });

---

cette version fonctionne correctement, mais si je n'utilise pas : $apply(...) la vue ne se met pas à jout automatiquement. Ors, je souhaiterait que ce soit le cas (j’aimerais ne pas avoir à faire appel à la fonction apply)
débutant avec angularjs, est ce que j'utiliserais mal le concept ou alors y a t'il une architecture special a suivre dans le cas des appel asynchrone ?

Ça n'a pas de sens, comment espères-tu avoir le databinding d'Angular si tu n'utilises pas les fonctions d'Angular ?

Il n'y a aucune raison de ne pas utiliser ng-click ou $scope.$apply, et je ne vois pas ce que ton histoire d'appel AJAX vient faire là-dedans.

comme expliqué précédemment, pas de ng-click car je n'ai pas de bouton.

ensuite lorsque je fait appel à $apply(...) je me trompe peut-être mais j'ai l'impression de faire une sorte de "refresh",

je debute avec angular, et je me trompe peut-être, mais je pensai que angular permettait justement de mettre à jour la vue en fonction de la modification des données (MVC) comme semble dire MoumouteMasters :

Citation:

---

si tu fais un appel ajax sur ton objet pour le mettre à jour, en théorie, Angular va remettre toute ta vue à jour tout seul, il n'y a rien à faire.

---

Pas besoin de bouton pour utiliser ng-click, tu peux l'utiliser sur n'importe quel élément.

Un peu de lecture sur $scope.$apply :
http://jimhoskins.com/2012/12/17/ang...and-apply.html
https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply%28%29
http://www.sitepoint.com/understandi...-apply-digest/

Il faut comprendre comment fonctionne la détection de changement de valeur dans Angular 1. Ça n'utilise pas Object.observe ou des getter/setter pour réagir directement aux nouvelles affectations. Pour des questions de support, ça utilise un algo de dirty checking, qui vient vérifier manuellement si les valeurs du scope ont changées. Donc le "refresh" est toujours manuel avec Angular 1, seulement il est encapsulé dans tous les appels des méthodes et services angular (ng-click, $timeout, $http...). Soit tu le fais "à la façon Angular" et les $scope.$apply seront gérés pour toi, soit tu appelles $scope.$apply manuellement.

Merci SylvainPV pour ces documents et cette explication, les choses sont un peu plus claires, je comprend mieux l'utilité de $scope.$apply
mon cas d'utilisation rentre exactement dans ce registre là.

en revanche je reste bloqué dur le developpement de mon application Angular.

avec le code suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<body data-ng-app="dropboxApp" data-ng-controller="dropboxFileExlorer">   <p> files length : {{dropBoxFiles .length}}<p>   <script type="text/ng-template"id="treeLevel.html"> <ul> <li ng-repeat="node in nodes">   <span>{{node.name}}</span> <div ng-include=" 'treeLevel.html'" onload="nodes = node.items"></div>   </li> </ul> </script>   <div data-ng-include=" 'treeLevel.html' " onload="nodes = dropBoxFiles"> </div>   <pre>{{dropBoxFiles|json}} </pre>

---

JS:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

var dropbox = new DropboxConnector('*********'); dropbox.init(); dropbox.checkAuthentication(); dropbox.authenticateClient();     dropbox.listContent("/" ,function(a){ console.log("a = "+a); console.log("b = "+a.length);   $scope.$apply(function () { alert("applying"); $scope.dropBoxFiles = a; });     });

---

la partie de ma vue indiquant le nombre de fichiers se met bien à jour ainsi que la partie affichant le json
en revanche la partie de ma vue affichant le contenu de ma variable dropBoxFiles sous forme de list HTML n'affiche rien du tout.
j'en deduit que ca doit être un problème au niveau de la declaration de mon vue en HTML (et non côté JS) mais je suis perdu car je ne voit pas où est l'erreur.

ca doit être un erreur de débutant ANgular, mais c'est mon cas, je débute.

Code:

---

onload="nodes = dropBoxFiles"

---

Ce changement de référence pour les fichiers ne présume rien de bon... Il me semble que cette variable nodes n'est plus rattachée au scope, du coup elle sort du databinding d'Angular. Regarde la documentation sur les ng-templates, ce n'est pas de cette façon qu'on passe des variables de scope à des sous-templates.

Salut,

règle n°1 : éviter d'utiliser jquery dans les controleurs AngularJS.
règle n°2 : les fonctions en dehors du code AngularJS sont interdites ! si ce sont des fonctions métier, il faut les mettre dans un service (service, factory...)
règle n°3 : lire et terminer la documentation d'AngularJS sur le site officiel et je t'envoie également sur l'excellent site frangular.com.
règle n°4 : pas de onload. A la limite, tu peux utiliser ng-init. Je te laisse voir la documentation.

Tu peux également injecter tes données à initialiser au chargement du controleur. Tu les initialise dans le routeur avec la variable resolve (cf. documentation).

Exemple (simple) de ng-repeat avec un bouton pour supprimer des éléments :
https://jsfiddle.net/04ufnspu/2/