Javascript \ Angular 函数范围混淆

Question

抱歉，如果这很明显，我有点 Angular\Javascript 菜鸟。我有以下服务：

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; 或类似的东西 - 请参阅 this discussion。

（顺便说一句，我还建议将您的函数和变量重命名为 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

这是我将如何使用你想要的服务..`当你尝试在 http 请求中调用 this.get 时，this 将在 Window 范围内寻找 get 方法，如果你打印这个控制台中的关键字，您可以看到没有 get 方法。 This 总是指您使用 this

的 Object

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