Javascript \\ Angular函数作用域混淆

Question

Apologies if this is obvious I am a bit of an Angular\\Javascript noob. I have the following service:

MyApp.service('ClientService', function ($http, $q, SharedData) {

    this.get = function () {
        var deferred = $q.defer();
        $http.get("/api/Client/")
            .success(function(data, status) {

                deferred.resolve(data);
            })
            .error(function(data, status) {
                deferred.reject(data);
            });

        return deferred.promise;
    };

    this.setCurrentClient = function (clientToSelect) {
        var deferred = $q.defer();
        var getCurrentClient = this.get();

        $http({ method: "POST", url: "/api/Client", data: clientToSelect })
            .success(function (data, status) {

                //Get the full selected client and all its properties rather than the list version
                getCurrentClient.then(
                     function (client) {
                         setCurrentClient(client);
                         setCurrentPeriod(client);
                     },
                     function (data) {
                         //uho something broke.
                     });

                deferred.resolve(data);
            })
            .error(function (data, status) {
                deferred.reject(data);
            });

        return deferred.promise;
    }

    .....
});

In the this.setCurrentClient function I make a call to the backend via $http and on its asynchronous successful return I call the get function via a variable getCurrentClient. I originally tried to call get() or this.get() directly and neither worked. The context in the .success callback function seems to be the global window context not the service context. The above solution seems a little messy to me. Is there a better way to get the service context and call get() rather than setting a variable with the method (var getCurrentClient = this.get()) and then calling it (getCurrentClient.then()) ? A little lost with javascript\\angular scope and contexts...

Answer 1

I believe you don't need to use "this" in your service, you can just declare your function as function get() { ... and then, in the callback in setCurrentClient, call:

var getCurrentClient = get();

However, if you do really need the "this", a common pattern is using var self = this; or something like that - see this discussion .

(as an aside, I would also recommend renaming your function and variables to have var clientPromise = getCurrentClient(); for better readability.)

Answer 2

I would say use angular factory in this case.

MyApp.factory('ClientService', function ClientFactory($http, $q, SharedData) {

    function get() {
        var deferred = $q.defer();
        $http.get("/api/Client/")
            .success(function(data, status) {

                deferred.resolve(data);
            })
            .error(function(data, status) {
                deferred.reject(data);
            });

        return deferred.promise;
    };

    function setCurrentClient(clientToSelect) {
        var deferred = $q.defer();
        var getCurrentClient = get();

        $http({ method: "POST", url: "/api/Client", data: clientToSelect })
            .success(function (data, status) {

                //Get the full selected client and all its properties rather than the list version
                getCurrentClient.then(
                     function (client) {
                         setCurrentClient(client);
                         setCurrentPeriod(client);
                     },
                     function (data) {
                         //uho something broke.
                     });

                deferred.resolve(data);
            })
            .error(function (data, status) {
                deferred.reject(data);
            });

        return deferred.promise;
    }

    .....
    // Expose the service methods
    return {
        get: get,
        setCurrentClient: setCurrentClient
        ...... (Expose what all methods you wanted to expose)
    };
});

Answer 3

Here is how i would use service as you want..`When you will try to call this.get inside http request then this will look for get method in Window scope and if you print this keyword in console you can see there is no get method. This always refer to the Object where you are using this

    MyApp.service('ClientService', function ($http, $q, SharedData) {

                    var get = function () {
                        var deferred = $q.defer();
                        $http.get("/api/Client/")
                            .success(function (data, status) {

                                deferred.resolve(data);
                            })
                            .error(function (data, status) {
                                deferred.reject(data);
                            });

                        return deferred.promise;
                    };

                    var setCurrentClient = function (clientToSelect) {
                        var deferred = $q.defer();

                        $http({
                                method: "POST",
                                url: "/api/Client",
                                data: clientToSelect
                            })
                            .success(function (data, status) {

                                //Get the full selected client and all its properties rather than the list version
                                get().then(
                                    function (client) {
                                        setCurrentClient(client);
                                        setCurrentPeriod(client);
                                    },
                                    function (data) {
                                        //uho something broke.
                                    });

                                deferred.resolve(data);
                            })
                            .error(function (data, status) {
                                deferred.reject(data);
                            });

                        return deferred.promise;
                    }
                    this.get = get;
                    this.setCurrentClient = setCurrentClient;
                });)
            .error(function (data, status) {
                deferred.reject(data);
            });

        return deferred.promise;
    }
    this.get = get;
    this.setCurrentClient = setCurrentClient;
})