Discussion :

[kespy13]

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) ?

[Invité]

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.

[kespy13]

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)

[SylvainPV]

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);
    });
});

[kespy13]

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 ).

[kespy13]

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 ?