angulaire.js - problème de transmission de données angulairejs

Question

Existe-t-il un moyen d'obtenir des données du serveur avant de charger le contrôleur ? Pour que la valeur puisse être garantie dans le contrôleur ? (Grosse tête, ligne noire...)

Une usine gData est définie comme suit

angular.module('myapp', ['user'])
    .factory('gData', function ($http) {
            //$rootScope该怎么用？？？？
            var data = {
                userInfo:{}
            };
                $http.get('user/getProfile', {})
                    .then(function (r) {
                        console.log(r.data); //这是console1
                        if(r.data.status == 1) {
                            data.userInfo.userId = r.data.data['user'].id;
                            data.userInfo.name = r.data.data['user'].name;
                            data.userInfo.group_id = r.data.data['user'].groups[0].id;
                            data.userInfo.supervisor_id = r.data.data['user'].groups[0].supervisor_id;
                        }
                    });
            console.log(data);//这是console2
            return data;
        })

    由于异步加载，console2先于1执行，所以返回的空值。

//请假条controller，user model中
       .controller('AskforLeaveController', [
           '$scope',
           'UserService',
           '$filter',
           'gData',
           function ($scope, UserService,$filter,gData) {
           
               console.log(gData.userInfo); //有值
               console.log(gData.userInfo.userId);//undefind
               
                UserService.askLeaveInfo.user_id = gData.userInfo.userId; //失败，undefind！！！！how can I do
              UserService.askLeaveInfo.supervisor_id = gData.userInfo.supervisor_id; //失败，undefind
              
              //...

S'il vous plaît, dites-moi, comment y faire face ? ? ? (Pleurant) Je fais ça depuis deux jours en utilisant diverses méthodes

Il y a un autre problème. Le $rootScope défini sous myapp dans le contrôleur sous user m'invite en fait à retrouver...

Answer 1

Euh... comme ça ? essayez, mon premier réflexe, je ne sais pas quoi faire = = Programme pour l'intuition, ne me blâmez pas si vous vous trompez

 $http.get('user/getProfile', {})
                    .then(function (r) {
                        console.log(r.data); //这是console1
                        if(r.data.status == 1) {
                            data.userInfo.userId = r.data.data['user'].id;
                            data.userInfo.name = r.data.data['user'].name;
                            data.userInfo.group_id = r.data.data['user'].groups[0].id;
                            data.userInfo.supervisor_id = r.data.data['user'].groups[0].supervisor_id;
                        }.then(function(){
                        console.log(data);//这是console2
                        return data;
                        })
                    });
            

Answer 2

Euh, c'est normal.

Retourpromise对象, ne renvoie pas de données, juste return $http.get(xxx);

Directement lors de l'appel à l'usine plus tard.

factory.func().then(data) {
    //你的逻辑
}

Idée non conventionnelle, je l'ai déjà fait...

1. Donnez un paramètre de méthode de rappel dans l'usine. Une fois la demande terminée, appelez le rappel et mettez userInfodans le paramètre.

2. Ajoutez un $watch et traitez-le après qu'il y ait une valeur (le changement se déclenchera, pensez à vérifier s'il n'est pas vide, il semble que la montre se déclenchera également lors de l'initialisation). N'oubliez pas de supprimer la montre après le traitement. La méthode reviendra var unwatch = $watch() après l'avoir appelée. Exécutez-la simplement directement unwatch();.

3. Envoyer des événements (ne devrait pas fonctionner en usine) ? .

Answer 3

Je ne sais pas si vous connaissez la promesse ?
La méthode $http.get() renverra une promesse. Si vous ne comprenez pas la promesse, veuillez d'abord la rechercher sur Google
Ce qui suit est une idée :

angular.module('myapp', ['user'])
    //创建service
    .service('user.service', function($http,$q) {
        var userInfo = null;
        return {
            getUserInfo: function () {
                return $q(function (resolve) {
                    if (userInfo) {
                        resolve(userInfo);
                    }else {
                        $http.get('/user/getProfile', {}).then(function (resp) {
                            userInfo = {
                                userId:resp.data.user.id,
                                name:resp.data.user.name,
                                group_id:resp.data.groups[0].id,
                                supervisor_id:resp.data.groups[0].supervisor_id,
                            };
                            resolve(userInfo);
                        });
                    }
                });
            }
        };
    })
    //使用这个service
    .controller('xxx',['user.service',function (service) {
        service.getUserInfo().then(function (userInfo) {
            console.log(userInfo);
        });
    }]);