Javascript \\ Angular函數作用域混淆

Question

抱歉，這很明顯，我有點Angular \\ Javascript noob。 我有以下服務：

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;
    }

    .....
});

在this.setCurrentClient函數中，我通過$ http調用后端，並在其異步成功返回時通過變量getCurrentClient調用get函數。 我最初嘗試直接調用get（）或this.get（），但都沒有用。 .success回調函數中的上下文似乎是全局窗口上下文，而不是服務上下文。 上述解決方案對我來說似乎有點混亂。 是否有更好的方法來獲取服務上下文並調用get（），而不是使用方法（var getCurrentClient = this.get（））設置變量然后再調用（getCurrentClient.then（））？ javascript \\ angular范圍和上下文有點迷失...

Answer 1

我相信您不需要在服務中使用“ this”，只需將函數聲明為function get() { ... ，然后在setCurrentClient的回調中調用：

var getCurrentClient = get();

但是，如果確實需要“ this”，則常見的模式是使用var self = this; 或類似的東西-請參閱此討論 。

（ var clientPromise = getCurrentClient(); ，我還建議重命名您的函數和變量，使其具有var clientPromise = getCurrentClient();以獲得更好的可讀性。）

Answer 2

我會說在這種情況下使用角度factory 。

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

下面是我會用服務為您want..`When你會嘗試打電話給this.get內的HTTP請求，那么這將尋找get方法在窗口范圍，如果你在控制台中，您可以看到打印這個關鍵字有沒有get方法。 這總是指您正在使用此 對象的對象

    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;
})