angularjs: comment stocker la fonction renvoyant la valeur dans une variable. basé sur ng-repeat

Question

salut je reçois l'intrestedid de ng-repeat, je veux appeler un autre service et stocker dynamiquement ces données dans une variable, car le besoin d'envoyer api séparée pour obtenir des images.

mon html est ressembler à ce

<div class="" ng-repeat="item in items" > 
    <div ng-init="MyPic = getMyprofile(item.interestedTo)"> 
    <img src="{{MyPic}}"> 
    </div> 
</div> 

Mon contrôleur est comme ceci.

$scope.getMyprofile = function(IntrstdId){ 
    appServices.profile(IntrstdId, function(response){ 
     $scope.meDetails = response.data; 
    }) 
    return $scope.meDetails; 

    } 

Mes services ressemblent à ceci.

service.profile= function(userId, callback) { 
    path = serviceUrl + '/profile/'+ userId; 
    $http({ 
     method: 'GET', 
     url: path 
     }).then(function(data) { 
     callback(data) 
    }, function(data) {}); 
} 

mais son obtenir indéfini, tous les problèmes dans ce code.

Answer 1

J'ai essayé de résoudre ce problème en créant une ébauche de résumé qui pourrait vous être utile. S'il vous plaît en revue et laissez-moi savoir si question se pose encore

HTML

<div ng-repeat ="data_ in parentData track by $index"> 
    <ul> 
     <li ng-repeat="result in data_.data track by $index" ng-init="counter=increaseCounter();"> 
     <div ng-model="counter"></div> 
    </ul> 
</div> 

Contrôleur

// It simply store variable value in scope.counter 
$scope.counter = 0; 
$scope.increaseCounter = function() { 
    var cnt = $scope.counter++; 
    return cnt; 
}; 

//Another way is to call service while update variable vaule 
$scope.counter = 0; 
$scope.increaseCounter = function() { 
    var cnt = $scope.counter++; 
    AppService.updateValue(cnt); 
    return cnt; 
}; 

Answer 2

$scope.getMyprofile = function(IntrstdId){ 
    appServices.profile(IntrstdId, function(response){ 
     $scope.meDetails = response.data; 
    }) 
return $scope.meDetails; 

}

Je pense que le problème est cette fonction. appService.profile est asyncronize méthode et avant de remplir la fonction retour $scope.meDetails;

ma suggestion est de hardcore une valeur comme dans ci-dessous et voir le résultat. Si cela fonctionne, vous devez changer la fonction en conséquence.

$scope.meDetails ='some value'; 
return $scope.meDetails; 

Answer 3

Il existe plusieurs problèmes liés aux meilleures pratiques associés au problème asynchrone.

1.Évitez d'utiliser ng-init sauf si vous souhaitez réexécuter la fonction lorsque vous reconstruisez l'élément, par exemple ng-if. C'est d'autant plus vrai lorsque vous utilisez ng-repeat sans track by, tout changement dans la source de données déclencherait à nouveau tous les ng-init dans les enfants.

Solution: Exécutez-les lorsque vous initiez le contrôleur ou dès que $scope.items est rempli.

angular.forEach($scope.items, function(item) { 
    appServices.profile(item).then(function(data){ 
    item.myPic = data; 
    }); 
}); 

<div class="" ng-repeat="item in items" > 
    <img src="{{item.myPic}}"> 
</div> 

2.Le manière correcte pour envelopper une fonction qui retourne la promesse (qui est $http) est de retourner la fonction elle-même. Vous pouvez en savoir plus sur la façon de transmettre le résultat résolu/rejeté.

// not needed anymore, just to showcase 
$scope.getMyprofile = function(IntrstdId){ 
    return appServices.profile(IntrstdId); 
} 

// same goes with the service function 
service.profile= function(userId) { 
    path = serviceUrl + '/profile/'+ userId; 
    return $http({ 
    method: 'GET', 
    url: path 
    }).then(function(response) { 
    return response.data; 
    }); 
}