angular.js - angularjs中关于异步加载的数据在controller之间共享的问题?

Question

app.factory('userService', ['$http', function ($http) {
         var userService= {},
                                    
         userService.getUsers = function () {                    
             return $http.get('getUsers');
         }     
         userService.users =[];                                       
         return userService;
 }]);

app.controller("FirstController",["$http","userService",function($http,userService){
       userService.getUsers().success(function (users){
           userService.users = users;//在SecondController得不到数据
       })
       //userService.users=[1,2,3] 如果我这样更新数据,在SecondController可以获得数组[1,2,3]

  }])
app.controller("SecondController",["$http","userService",function($http,userService){
   //userService.users 此得到的为空数组 
    //但是console.log(userService) 可以看到userService.users中有数据

  }])

Answer 1

La requête $http est une opération asynchrone lors de l'exécution de SecondController, il n'y a aucune garantie que les données ont été obtenues à ce moment

Answer 2

Si vous souhaitez sceller $http dans votre propre service, vous devez comprendre les modes $q et promise. À ce stade, vous équivalez à utiliser des idées synchrones pour effectuer des opérations asynchrones.

Answer 3

Il existe de nombreux problèmes de ce type dans nos projets. Permettez-moi de parler brièvement de ma solution actuelle. Comme ci-dessus, un service est encapsulé et HTTP est utilisé pour demander des données. Lorsque les données sont renvoyées, une copie est stockée dans le cache. Tous les contrôleurs qui ont besoin de données utilisent ce service pour garantir la cohérence des données.

Answer 4

Généralement, les promesses sont utilisées pour encapsuler les serveurs. (Pratique recommandée)

La personne qui pose la question ne veut pas utiliser de promesses, donc l'utilisation de rappels peut également résoudre le problème.

Une autre idée est d'utiliser la notification d'événement. Lorsque le serveur obtient les données, il utilise l'événement pour avertir le contrôleur.

Answer 5

Il a été dit à l'étage que cela pouvait être résolu en utilisant le rappel. Je l'ai essayé et cela a fonctionné. Partagez le code. J'espère que cela vous sera utile

.

send() est un événement keyup pour obtenir dynamiquement la valeur d'entrée dans le premier contrôleur

var app = angular.module("zgeApp",[]);
    app.controller('firstCtrl', ['$scope','change', function($scope,change){
        $scope.send = function(){
           change.callback($scope.name)
        }
    }])
    app.controller('secondCtrl', ['$scope','change', function($scope,change){
        change.callback = function(data){
            $scope.name1 = data;
        }                      
    }])
    app.service("change",function(){
        return {};
    })