Je suis assez nouveau dans l'ensemble du monde angularjs et de la façon dont cela fonctionne, mais j'ai du mal à le faire fonctionner comme prévu. Je sais que c'est quelque chose à voir avec la façon dont j'utilise Utilisation de code: à partir de cet exemple, je ne peux pas accéder à des résultats du i Sachez que si je change le contrôleur en Je sais aussi que la raison pour laquelle il ne fonctionne pas est parce que le contexte de Donc, ma question est la suivante: comment accédez-vous aux résultats d'un appel de $ http.xxx en utilisant merci, $ http.get () et d'essayer d'assigner les variables à mon contrôleur, mais je ne peux tout simplement pas le comprendre. $ Champ d'application au lieu de Ceci Je peux le faire fonctionner, si possible, si possible, je préférerais utiliser ceci afin que je puisse utiliser " contrôleur comme " $ http.get Demande d'au sein de la liste de fournisseurs dans la page HTML (c'est-à-dire {{fournisseur.supplierlist [0] .supplier_name}} n'affiche aucun résultat) $ Portée Je peux avoir accès à ces données (bien que je n'utilise pas le même format que ci-dessus), et je sais aussi que les données sont remplacées à l'aide de la console .log (this.supplierlist) à l'intérieur du .Success appelez. ceci < / code> chang ES de l'intérieur du contrôleur à l'intérieur du http.get appelez. ceci au lieu de portée ? J'ai lu quelques sources différentes dessus, mais la plupart des discussions sur l'utilisation de $ de portée et de promesses. Je n'ai trouvé aucune couverture en utilisant ceci (ou le déclarant avec var fournisseur = ceci ). Toute aide serait très appréciée.
5 Réponses :
stocke toujours une référence variable à ceci code> de sorte que vous n'avez pas de problèmes de contexte, utilisez cette variable au lieu de ce code> tout au long du contrôleur app.controller('ctrlSuppliers', function($http){
var vm = this;
// now can forget using "this" and use variable instead
vm.supplierList = {};
$http.get("http://some_url_here") .success(function(response) {
// no context issues since "vm" is in scope
vm.supplierList = response.records;
});
});
Je suis sûr que j'ai essayé cette approche hier soir et cela ne fonctionnait pas pour moi, cependant déclarant ce à une variable et référençant cette variable fonctionne maintenant. Si simple - merci beaucoup
Pour toute personne qui lise cela, le succès est obsolète maintenant. Utiliser à la place.
pour $ http Vous avez la possibilité de stocker vos propres objets dans le Cette technique est particulièrement utile si vous appelez $ http.get () plusieurs fois dans une boucle. ConfigObject , qui est le deuxième argument facultatif à $ http.get () . Cet objet est alors mis à votre disposition car il s'agit d'une propriété de réponse .
Je pense que la réponse de Charlietfl est la bonne, mais pense qu'une explication légèrement étendue pourrait être utile.
"Ceci" en JavaScript fait référence au contexte de l'appel de la fonction en cours. Si vous regardez votre code, vous verrez que cela est utilisé dans deux fonctions - car ils sont deux fonctions différentes, elles peuvent avoir des contextes complètement différents, donc "Ceci" se référera à différents objets (comme vous vivrez). La manière standard de traiter avec ceci est de sauvegarder le contexte d'appel de la première fonction à utiliser dans les autres. La réponse de Charlietfl est un bon moyen de l'accomplir. J'ai ajouté son code pour référence.
Le Vous devez utiliser le Voir Manuel de liaison: https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/function/bind Cette variable est délicat dans JavaScript. Lorsque la fonction de rappel est exécutée, vous ne saurez pas ce que le Ceci est référencé. Sauf si elle est documentée quelque part. .bind (this) pour joindre votre propre cette la valeur à utiliser dans la fonction. < Pré> xxx
avec des fonctions de flèche disponibles dans ECMAScript 6 Le problème avec Ce code> est pris en charge et vous avez moins à taper. Votre exemple ressemblerait à ceci: app.controller('ctrlSuppliers', function($http){
this.supplierList = {};
$http.get("http://some_url_here")
.success(response => { this.supplierList = response.records; })
.error(() => { this.supplierList = [{supplier_id: 0, supplier_name: 'Error Getting Details'}]; });
});
Juste une tête pour que les appels HTTP $ n'appartiennent généralement pas à vos contrôleurs! Extrayez-les à un service plutôt que la réutilisabilité, la stabilité et l'injection de dépendance non gratuuleuse.
@GumblesNatch merci pour cela. Comme je l'ai dit, je viens juste de commencer à regarder angular et que je n'ai pas eu le temps de regarder à travers toutes les fonctionnalités et toutes les fonctions, cependant en sachant que cela me sauvera probablement beaucoup de temps sur la piste quand je les ai finis par les découverts.