如何存储在角工厂http服务数据 [英] How to store data from http service in angular factory

问题描述

我想全球存储使用服务从/api/login.json的价值，但我想我有某种形式的计时问题。在控制器中的console.log语句告诉我，scope.login对象是不确定的。

我是什么失踪？

谢谢！

厂服务：

  myApp.factory（'LoginFactory'，['$ HTTP'，函数（$ HTTP）{    this.data;
    $ http.get（'/ API / login.json'）。成功（功能（数据）{
        this.data =数据;
    }）;    返回{
        的getData：功能（）{
        返回this.data;
    }
  }
}]）;
 

控制器：

  myApp.controller（'AccountsCtrl'，['$范围，会计，LoginFactory'，函数（$范围，会计，LoginFactory）{
  $ scope.login = LoginFactory.getData（）;
  的console.log（'$ scope.login：％O'，$ scope.login）;
  $ scope.accounts = Accounts.index（）;}]）;
 

解决方案

你应该避免在这种情况下使用这个关键字。只是为了更好地声明一个新的变量。

  myApp.factory（'LoginFactory'，['$ HTTP'，函数（$ HTTP）{
    VAR的数据;
    $ http.get（'/ API / login.json'）。成功（功能（D）{
        数据= D;
    }）;
    返回{
        的getData：功能（）{
            返回的数据;
        }
    };
}]）;
 

您仍然有一场比赛的问题了，所以我也建议，要么承诺链接

  myApp.factory（'LoginFactory'，['$ HTTP'，函数（$ HTTP）{
    VAR承诺= $ http.get（'/ API / login.json'）;
    返回{
        的getData：函数（回调）{
            promise.success（回调）;
        }
    };
}]）;
 

甚至是有条件的GET

  myApp.factory（'LoginFactory'，['$ HTTP'，函数（$ HTTP）{
    VAR的数据;
    返回{
        的getData：函数（回调）{
            如果（数据）{
                回调（数据）;
            }其他{
                $ http.get（'/ API / login.json'）。成功（功能（D）{
                    回调（数据= D）;
                }）;
            }
        }
    };
}]）;
 

最后两种方法要求你重写你的控制器，虽然

  myApp.controller（'AccountsCtrl'，['$范围，会计，LoginFactory'，函数（$范围，会计，LoginFactory）{
  LoginFactory.getData（功能（数据）{
      $ scope.login =数据;
      的console.log（'$ scope.login：％O'，$ scope.login）;
      $ scope.accounts = Accounts.index（）; //这个可能要何去何从IDK的
  }）;
}]）;
 

I would like to store the value from /api/login.json globally using a service, but I think I have some sort of timing issue. The console.log statement in the controller tells me that the scope.login object is undefined.

What am I missing?

Thanks!

Factory service:

myApp.factory('LoginFactory', ['$http', function($http){

    this.data;
    $http.get('/api/login.json').success(function(data) {
        this.data = data;
    });

    return {
        getData : function(){
        return this.data;
    }
  }
}]);

Controller:

myApp.controller('AccountsCtrl', ['$scope', 'Accounts', 'LoginFactory', function($scope, Accounts, LoginFactory){
  $scope.login = LoginFactory.getData();
  console.log('$scope.login: %o', $scope.login);    
  $scope.accounts = Accounts.index();

}]);

解决方案

you should probably avoid use of the this keyword in this context. better just to declare a new variable.

myApp.factory('LoginFactory', ['$http', function ($http) {
    var data;
    $http.get('/api/login.json').success(function (d) {
        data = d;
    });
    return {
        getData: function () {
            return data;
        }
    };
}]);

you will still have a race issue though, so i would also recommend either promise chaining

myApp.factory('LoginFactory', ['$http', function ($http) {
    var promise = $http.get('/api/login.json');
    return {
        getData: function (callback) {
            promise.success(callback);
        }
    };
}]);

or even a conditional get

myApp.factory('LoginFactory', ['$http', function ($http) {
    var data;
    return {
        getData: function (callback) {
            if(data) {
                callback(data);
            } else {
                $http.get('/api/login.json').success(function(d) {
                    callback(data = d);
                });
            }
        }
    };
}]);

The last two approaches require you to rewrite your controller though

myApp.controller('AccountsCtrl', ['$scope', 'Accounts', 'LoginFactory', function($scope, Accounts, LoginFactory){
  LoginFactory.getData(function(data) {
      $scope.login = data;
      console.log('$scope.login: %o', $scope.login);    
      $scope.accounts = Accounts.index(); //this might have to go here idk
  });
}]);

这篇关于如何存储在角工厂http服务数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！