callback / promise

Version imprimable

callback / promise

Bonjour,

j'essai de comprendre comment fonctionne le .then() d'angular, dans certain cas j'arrive bien a le faire fonctionné et dans d'autre je me retrouve avec l'erreur : "TypeError: Cannot read property 'then' of undefined"

je pense que j'ai un soucis de compréhension des callback et promise..

voici une de mes fonctions qui foire:
controller

Code:

1
2
3
4
5
6
7
8
9
10
11
12
'use strict';
var app = angular.module('appli');
app.controller('MsgCtrl', function ($firebaseArray,$firebaseObject,$firebase,$scope,Messages,Auth,toaster) {
    $scope.idUtil = Auth.user.uid;
	$scope.listemsg = Messages.getMsg($scope.idUtil);
	console.log($scope.listemsg);
	$scope.valider = function(id){
		Messages.validerMsg(id,$scope.idUtil).then(function(){
			alert('coucou');
		});
	};
});

service

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 'use strict';
 var app = angular.module('appli');
 app.factory('Messages', function (FIREBASE_URL,$firebaseArray,$firebaseObject, Auth,$q, toaster,$location) {
 	 var bdd = new Firebase(FIREBASE_URL);
 	 /*recupere toute les infos present dans profile*/
 	 var messages = $firebaseArray(bdd.child('message'));
 	 var Messages =  { 
 		 all: messages,
                 validerMsg: function(id,uti){
						    var msg = bdd.child('message').child(uti).child('evenement').child(id);
 						var onComplete = function(error) {
						  if (error) {
						      	 toaster.pop('error', error);
						      	 console.log('Error:', error); 
						  } else {
 					 		toaster.pop('success', "Bravo, événement valider");
 					 		 $location.path('/message');
						  }
						};
 						return msg.remove(onComplete); 
 				}

Donc j'essai tout simplement pour l'instant d'avoir mon alert qui s'affiche, ensuite je passerai une autre fonction a la place de l'alert.
Pourquoi ai je donc l'erreur Type error, then of undefined ?

Merci

27/05/2015, 19h33
slim
Salut,

Peut-être que dans la méthode tu devrais faire un truc du genre :
Code:

1 2 3 return msg.remove(onComplete).then(function(res){ return res.data; })
D'ailleurs, tu devrais utiliser des promises partout. c'est conseillé... car les actions associées sont toujours exécutées en asynchrone.
Ce n'est pas le cas de cet appel :

Code:

Messages.getMsg($scope.idUtil);

Le fonctionnement des promesses dans AngularJS est relativement le même que n'importe quelle autre API. Exemple : JQuery
28/05/2015, 10h00
rioll
En faisant
Code:

1 2 3 return msg.remove(onComplete).then(function(res){ return res.data; })
J'ai le même soucis TypeError: Cannot read property 'then' of undefined.

Concernant ceci:

Code:

$scope.listemsg = Messages.getMsg($scope.idUtil);

Sa serait mieux de faire une promise que de stoker le résultat dans mon scope a l'appel du controller ? Quel est la différence concrète lors de l’exécution du code ?
28/05/2015, 10h23
slim
Citation:
Envoyé par rioll

En faisant

Code:

1 2 3 return msg.remove(onComplete).then(function(res){ return res.data; })

J'ai le même soucis TypeError: Cannot read property 'then' of undefined.
Oups, pardon, je pensais que msg était un service et que remove renvoyait une promesse.
le remove est fait sur le résultat des fonctions child de la variable bdd. Il faudrait voir pourquoi ces fonctions renvoient undefined.
Je pense que cela n'a rien avoir avec les promises...

en faisant ceci :
Code:

1 2 $scope.listemsg = Messages.getMsg($scope.idUtil);
au chargement de la page, ta variable sera toujours nulle car la promesse n'est pas résolue.
Si tu veux que ta variable soit résolue avant le chargement de ta page, injecte cette variable dans le contrôleur depuis le routeur.
Sinon, utilise une promesse et affecte son résultat à ta variable.

Avec le code actuel, à l'exécution, tu as bien ta liste de messages ?

Concernant les promesses, je te renvoie à la documentation...
et un article très intéressant sur le sujet : ici

Déjà pour le remove j'ai remplacer par $remove : https://www.firebase.com/docs/web/li...eobject-remove

Code:

1
2
3
4
5
6
7
8
9
10
11
validerMsg: function (id, uti) {
  var msg = bdd.child('message').child(uti).child('evenement').child(id);
  var m = $firebaseObject(msg);
  return m.$remove().then(function (msg) {
    toaster.pop('success', 'Bravo, événement valider');
    $location.path('/message');
  }, function (error) {
    toaster.pop('error', error);
    console.log('Error:', error);
  });
}

Voilà qui marche a présent, je renvoi bien une promise a mon controller et donc je peux executer un then:

Code:

1
2
3
4
5
$scope.valider = function(id){
    Messages.validerMsg(id,$scope.idUtil).then(function(){
        ajoutPresta(id,$scope.idUtil);
    });
};

Et oui c'est bien ce que je ne comprend pas, j'ai la liste des messages au chargement de ma page, sans soucis...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
getMsg: function (uti) { //get que les message avec status 0, faire boucle ppour verif et add to liste
 					     	var liste = [];
 					        var msg = $firebaseArray(bdd.child('message').child(uti).child('evenement'));
	     					    msg.$loaded().then(function(array) {
 
						            for (var i = array.length - 1; i >= 0; i--) {
 
							             var resultat  = array[i];
 
							             if(resultat.status == '0'){
									          liste[liste.length] = resultat;	
	 					     			}
	 					 			}
		 					 });
 
				  			return liste;
 
 						 }

Je pense que le secret cest le $loaded..sa permet de faire de la magie :x

Mais malgré ce loaded, est ce que mon code n'est tout de même pas bon?

Merci en tout cas