IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

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


Sujet :

AngularJS

  1. #1
    Membre habitué
    Inscrit en
    Février 2006
    Messages
    310
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 310
    Points : 132
    Points
    132
    Par défaut 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) ?

  2. #2
    Invité
    Invité(e)
    Par défaut
    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.

  3. #3
    Membre habitué
    Inscrit en
    Février 2006
    Messages
    310
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 310
    Points : 132
    Points
    132
    Par défaut
    Citation Envoyé par MoumouteMasters Voir le message
    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.

    voici mon exemple :

    la partie html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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)

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
        });
    });
    One Web to rule them all

  5. #5
    Membre habitué
    Inscrit en
    Février 2006
    Messages
    310
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 310
    Points : 132
    Points
    132
    Par défaut
    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 ).

  6. #6
    Membre habitué
    Inscrit en
    Février 2006
    Messages
    310
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 310
    Points : 132
    Points
    132
    Par défaut
    pour plus de precision, voici mon code plus en détails:

    la vue html:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
    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 ?

  7. #7
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Ç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.
    One Web to rule them all

  8. #8
    Membre habitué
    Inscrit en
    Février 2006
    Messages
    310
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 310
    Points : 132
    Points
    132
    Par défaut
    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 :
    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.

  9. #9
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    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.
    One Web to rule them all

  10. #10
    Membre habitué
    Inscrit en
    Février 2006
    Messages
    310
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 310
    Points : 132
    Points
    132
    Par défaut
    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 : 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
     
    <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 : 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
     
    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.

  11. #11
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.
    One Web to rule them all

  12. #12
    Membre expérimenté Avatar de slim
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Décembre 2002
    Messages
    938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2002
    Messages : 938
    Points : 1 337
    Points
    1 337
    Par défaut
    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/
    Faites une recherche sur le forum et/ou sur internet et lisez la doc officielle avant de poser une question svp.
    et n'oubliez pas de lire les FAQ !
    FAQ Java et les cours et tutoriels Java
    Doc JAVA officielle
    AngularJS 1.x
    Angular 2

    Do it simple... and RTFM !

Discussions similaires

  1. Régle de mise à jour d'une vue
    Par billybob2 dans le forum MS SQL Server
    Réponses: 9
    Dernier message: 08/06/2011, 16h50
  2. [MVC] Mise à jour de la vue par le modèle
    Par PanicKernel dans le forum MVC
    Réponses: 2
    Dernier message: 20/08/2007, 22h10
  3. "Mise à jour" d'une vue
    Par mostro_600 dans le forum SQL
    Réponses: 6
    Dernier message: 18/06/2007, 18h24
  4. [SWT] Mise à jour d'une vue
    Par Nikk0 dans le forum SWT/JFace
    Réponses: 2
    Dernier message: 16/06/2007, 14h13
  5. [FORMS6] : mise à jour d'une vue
    Par gaultier dans le forum Forms
    Réponses: 13
    Dernier message: 03/07/2006, 13h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo