it-swarm.com.de

Angular http gibt das Statusobjekt $$ zurück

Ich habe folgende Fabrik definiert:

angular.module("account").factory("users",["$http",
    function(a){
      return {
         getUser: function(){
            return a.get("/user/me").then(function(r){
                return r.data;
            });
        }
    };
  }
]);

Und mein Controller:

angular.module("test.controllers",["account"])
.controller("TestCtrl",["$scope","users",
    function(a,u){
        a.user = u.getUser();
        console.log(a.user);
}]);

Hier ist das console.log:

 d {$$state: Object, then: function, catch: function, finally: function} $$state: Object status: 1 value: Object user: Object__v: 0 _id: "54c1fg29f36e117332000005" temp: "1ce3793175e0b2548fb9918385c2de09"  __proto__: Object __proto__: Object __proto__: Object __proto__: Object

Der obige Code gibt ein Statusobjekt anstelle des Benutzerobjekts zurück. Aber aus dem Protokoll hat das Statusobjekt das Benutzerobjekt innerhalb des Werts. Wie erhalte ich das Benutzerobjekt? Oder mache ich das völlig falsch?

Ich weiß, die andere Möglichkeit ist, das $ http.get zurückzugeben und die then () -Methode im Controller aufzurufen. Aber ich benutze das Benutzerobjekt häufig, und wenn ich die then () -Methode im Controller aufrufe, ist es fast dieselbe wie die Verwendung des $ http.get-Controllers anstelle der Factory.

16
wdphd

JavaScript-E/A ist in der Regel einschließlich in diesem Fall asynchron. Ihr getUser-Aufruf gibt ein $ q promise zurück. Um es auspacken zu können, müssen Sie es anketten und dann als solches auspacken:

angular.module("test.controllers",["account"])
.controller("TestCtrl",["$scope","users",
    function(a,u){
        u.getUser().then(function(user){
            a.user = user;
            console.log(a.user);
        });
}]);

Wenn Sie Routing verwenden, möchten Sie möglicherweise auch die Option resolve in der Route überprüfen. Siehe auch diese verwandte Frage .

25
angular.module("account").factory("users",["$http",
    function(a){
      var factObj = {
         user: null,
         getUser: function(){
            return a.get("/user/me").then(function(r){
                factObj.user = r.data;
            });
        }
      factObj.getUser();

      return factObj;
    };
  }
]);

angular.module("test.controllers",["account"])
.controller("TestCtrl",["$scope","users",
    function(a,u){
        a.userService = u;
}]);

Ihrer Ansicht nach

<div ng-controller="TestCtrl as test">{{test.userService.user}}</div>

Bei Änderungen, die auf Kommentaren basieren, stimmt das nicht mit dem Controller oder der Ansicht, wie Sie sie wahrscheinlich hatten, aber dieses Muster funktioniert gut und beseitigt die Notwendigkeit, dann in jedem Controller vorhanden zu sein, der die Daten möglicherweise erneut verwendet.

Durch das Speichern Ihres Modells in der Fabrik oder in einem Service, der sich mit dem Abrufen der Daten befasst, ist es in der Regel einfacher, die Daten in jede Ansicht zu bringen, wo Sie sie benötigen. Nachteil ist, dass Sie den Benutzer abrufen, wenn auf diese Factory verwiesen wird, anstatt die getUser-Funktion explizit vom Controller auszulösen. Wenn Sie sich fortbewegen möchten, können Sie das Versprechen ab dem ersten Aufruf in der Funktion getUser speichern und dieses Versprechen für alle nachfolgenden Aufrufe zurückgeben, sofern es bereits festgelegt ist. Auf diese Weise können Sie getUser mehrmals aufrufen, ohne die API-Anforderung zu wiederholen.

2
shaunhusain

Ich habe hier ein ähnliches Szenario .. Ich hoffe es hilft jemandem ... 

meine Fabrik .. 

 angular.module('programList.services',[])
    .factory('PROGRAMS', function($http) {
     return {
       getprogramList: function() {
       return $http.get('/api/programs/list').then(function(result) {
       return result.data[0];
       });
      }
     };
    });

Das ist mein Controller ..

 angular.module('programList.services'])
 .controller('tviProgramsController',
    function($scope,$state,$stateParams,PROGRAMS){
        //this is the call to access the list as answered by Benjamin Above using then on success 
        PROGRAMS.getprogramList().then(function(list){
                  $scope.programlist = list;
              });
  });

;

Dies ist auf dem Router auf der Serverseite ...

  var express     = require('express'),
     programscontroller = require(path + 'programservercontroller'),
     router         = new express.Router();
     router.get('/api/programs/list', programscontroller.programlist);

Dies ist das Modul für den mysql-Aufruf

var con   = require('../../database/dbcon'),
mysql = require('mysql');

module.exports.programlist = function(req, res){
 var data = req.params.data;
 var sql = "CALL `sp_programlist`";
  con.query(sql, function(err, result) {
      if(err){
          throw err;
      } else {
          res.send(JSON.stringify(result));
      }
     });
};
0
sireken