Angular 服务 - 通过 'this'

Question

我正在尝试使用外部函数来减少 angular 服务中重复的标准 $http 调用代码，但我遇到了我认为是 scope/this 的问题。问题是，我该如何修改服务，以便我可以在调用 apiGet 函数

时使用 myService 中的 'this'

示例服务代码：

angular
.module('myApp')
.factory('myService', ['$http', function($http) {

    function myService() {
        this.UID;
        this.stuff;
        this.things;
    }

    myService.build = function() {
        return new myService();
    };

    myService.prototype.setUID = function(UID) {
        this.UID = UID;
    };

    // key part of problem code - have tried this:
    myService.prototype.getStuff = apiGet.apply(this,[$http,'stuff',this.UID]);
    // and this:
    myService.prototype.getThings = apiGet($http,'things',this.UID);
}]);

示例外部函数代码：

function apiGet($http,collection,UID) {
return function() {
    return $http({
            method:  'get',
            url:     '/php/'+collection+'/'+UID,
            headers: { 'Content-Type': 'application/json' }
        }).then(function(response) {
            return response.data;
        });

    }
};

服务的最后几行是我遇到的问题 - 如果我 'hardcode' 一个 UID 到函数调用中，那么服务工作正常，但是当我在参数中使用 'this' 时调用函数然后 UID 显示为 'undefined'.

控制器代码的关键部分如下 - 我实例化服务，然后使用 setUID 方法应用 UID。之后控制器中的其他方法调用 myService.getStuff 方法等

    this.svc = new MyService();
    this.svc.setUID(UID);

一切正常，包括 'this' 位，如果我不使用 apiGet 函数而只是手动创建服务方法，即：

    myService.prototype.getStuff = function() {
        return $http({
            method:  'get',
            url:     'php/stuff/'+this.UID,
            headers: { 'Content-Type': 'application/json' }       
        }).then(function(response) {
            return response.data;
        });
    };

顺便说一句，我是 angular 的新手，我的头在范围、$scope 等方面略有旋转

Answer 1

Angular服务是单例，不需要直接处理instance/prototypes（因为只会创建1个副本）。

angular
.module('myApp')
.factory('myService', ['$http', 'baseService', function($http, httpGet) {
  var uid; //to be set by setUID;
  var myService = Object.create(baseService); //'inherits' from baseService
  angular.extend(myService, {  //extends with custom methods
    build: build,
    setUID: setUID,
    getStuff: _.partial(httpGet, $http, "stuff"),
    getThings: _.partial(httpGet, $http, "things"),
  });
  return myService;
  
  function build (){...}
  function setUID (){...}
  function getStuff (){...}
  function getThings (){...}
   
}]);

要使用此服务，只需注入该服务，您就可以访问：

myService.getThings(this.uid); //calls httpGet($http, 'things', UID);
myService.getStuff(this.uid); //calls httpGet($http, 'stuff', UID);

Answer 2

所以我已经弄明白了，感谢@Henry 关于 re-factoring 我的服务的建议，使它们变得更简单。

API函数代码如下：

function apiGet($http,collection,UID) {
    return $http({
        method:  'get',
        url:     '/php/'+collection+'/'+UID,
        headers: { 'Content-Type': 'application/json' }
    }).then(function(response) {
        return response.data;
    });
};

示例服务代码：

angular
.module('myApp')
.factory('myService',['$http',function($http) {

    var myService = {
        setUID        : setUID,
        getStuff      : getResources,
        getThings     : getThings
    };
    return myService;

    function setUID(UID) {
        this.UID = UID    
    };

    function getStuff() {
        return apiGet.apply(this,[$http,'stuff',this.UID]);            
    };

    function getThings() {
        return apiGet.apply(this,[$http,'things',this.UID]);            
    };
}]);

这现在工作得很好，我可以非常简单地 re-use 跨多个服务的 apiGet 函数

Angular 服务 - 通过 'this'

Angular Service - Passing 'this'

service

scope

this

angularjs