Javascript \ Angular function scope confusion

Question

Извинения, если это очевидно, я немного угловой \ 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() или this.get() и не работал. Контекст в функции callback .success представляется глобальным контекстом окна, а не контекстом службы. Вышеприведенное решение кажется мне немного грязным. Есть ли лучший способ получить контекст службы и вызвать get(), а не устанавливать переменную с помощью метода (get getCurrentClient = this.get()), а затем вызвать его (getCurrentClient.then())? Немного потерянный с javascript \ угловой областью и контекстами ...

Answer 1

Я считаю, что вам не нужно использовать «это» в своей службе, вы можете просто объявить свою функцию как function get() { ..., а затем в обратном вызове в setCurrentClient, звоните:

var getCurrentClient = get(); 

Однако, если вы действительно нуждаетесь в «это», общая картина с помощью 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

Вот как я хотел бы использовать услугу, как вы want..`When вы пытаетесь вызвать запрос this.get внутри HTTP затем этот будет искать способ попасть в рамках окна, и если вы печатаете это ключевое слово в консоли вы можете видеть, что метода get нет. Это всегда относятся к 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; 
})