AngularJs $champ d'application n'est pas mise à jour après une requête GET sur une usine
J'ai essayé AngularJS pour un projet expérimental et je suis venu avec ce problème.
Dans mon code html, je veux afficher une liste d'éléments
Index.html
<h1>Some list</h1>
<div ng-controller="datlist">
<div ng-repeat="item in items">
<div>Item description: {{item.description}}</div>
<div>Item name: {{item.name}}</div>
</div>
</div>
J'ai d'abord été à l'aide d'un contrôleur simple d'obtenir les informations et mettre à jour la vue en utilisant simplement ceci:
controllers.js (original)
function datlist($scope,$http){
$http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).
success(function(data, status, headers, config) {
$scope.items=data.itemsToReturn;
console.log(data);
}).
error(function(data, status, headers, config) {
console.log("fail");
});
}
Cela fonctionnait assez bien et j'ai pu obtenir la liste des éléments. Tandis que, en changeant ma structure à utiliser une usine à faire la même demande et le lier à $champ d'application.les éléments qui ne fonctionne pas. J'ai essayé beaucoup de variations de $regarder, mais je ne pouvais pas le faire de mise à jour $champ d'application.éléments. J'ai trouvé quelque chose à propos de $s'appliquent, mais je ne comprends vraiment pas comment l'utiliser.
controllers.js (nouveau)
var datModule = angular.module('datModule',[]);
datModule.controller('datlist', function ($scope, datfactory){
$scope.items = datfactory.getlist();
$scope.$watch($scope.items, $scope.items = datfactory.getlist());
});
datModule.factory('datfactory', function ($http){
var factory = {};
factory.getlist = function(){
$http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).
success(function(data, status, headers, config) {
console.log(data.itemsToReturn); //I get the correct items, all seems ok here
return data.itemsToReturn;
}).
error(function(data, status, headers, config) {
console.log("fail");
});
}
return factory;
});
Des idées sur ce sera formidable.
PS: j'ai trouvé un grand nombre de messages de parler de ce problème, mais aucun d'entre eux m'a aidé à obtenir une solution complète.
Grâce
OriginalL'auteur João Martins | 2014-02-18
Vous devez vous connecter pour publier un commentaire.
À l'aide d'une montre pour qui est un peu laid.
essayez ceci:
C'est la façon dont vous utilisez des promesses pour async question.
Mise à JOUR (15.01.2015): Maintenant, même plus élégant!
Magnifique, merci Konstantin.
OriginalL'auteur Konstantin Krass
La question n'a rien à voir avec la portée digérer cycle. Vous essayez de renvoyer à partir de l'intérieur d'un rappel directement, ce qui n'est pas en mode asynchrone possible.
Je vous recommande d'utiliser une promesse, ou le retour de la http promesse directement.
De retour la promesse directement, et de gérer les succès/échec à
factory.getlist().success()
Vous pouvez également utiliser votre propre promesse si vous souhaitez envelopper de la logique supplémentaire autour de la demande.
OriginalL'auteur Dan Saltmer
essayez d'initialiser
$scope.items = [];
au contrôleur, avant d'appeler $httpJ'espère que cela vous aide.
OriginalL'auteur Jorge Guerola
Eh bien, il semble parfait, mais vous pouvez utiliser
$apply
comme ça.Essayez d'utiliser $s'appliquent
OriginalL'auteur Jay Shukla
Je pense à une autre solution élégante à ce problème pourrait être - si vous utilisez l'un de l'acheminement des bibliothèques, dans mon cas, c'est l'INTERFACE utilisateur du Routeur, mais pourrait aussi être ngRoute, est de faire de votre contrôleur dépend de la réponse de la promesse, par exemple. l'ajout d'une détermination de la propriété de l'état et de la route qui permet de ne pas laisser le contrôleur de charge jusqu'à ce que la promesse est résolu et les données sont prêtes, si dans votre config:
Et injecter le datData dépendance dans votre contrôleur, où vous pouvez l'appliquer directement sur le $scope:
OriginalL'auteur Nandor Persanyi