Функция обслуживания http-сервиса AngularJS с использованием неправильной области "this"

Функция успеха $http.put не имеет доступа к области this службы, вызываемой внутри. Мне нужно обновить свойство службы в обратном вызове из запроса PUT.

Это сокращенный пример того, что я пытаюсь сделать в службе:

var myApp = angular.module('myApp', function($routeProvider) {
// route provider stuff
}).service('CatalogueService', function($rootScope, $http) {
    // create an array as part of my catalogue
    this.items = [];

    // make a call to get some data for the catalogue
    this.add = function(id) {
        $http.put(
            $rootScope.apiURL,
            {id:id}
        ).success(function(data,status,headers,config) {
             // on success push the data to the catalogue
             // when I try to access "this" - it treats it as the window
             this.items.push(data);
        }).success(function(data,status,headers,config) {
            alert(data);
        });
    }
}

Извините, если в JS есть некоторые ошибки, основным моментом является то, как я могу получить доступ к области обслуживания изнутри обратного вызова успеха?

РЕДАКТИРОВАТЬ: в то время как ответ на этот вопрос был правильным, я переключился на метод factory, так как Джош и Марк рекомендовали его

Ответ 1

Создайте закрытие переменной (часто называемой that), которая назначена this, чтобы ваши функции обратного вызова имели доступ к вашему объекту службы:

app.service('CatalogueService', function($rootScope, $http) {
    var that = this;
    ...
        ).success(function(data,status,headers,config) {
          that.items.push(data);

Вот Plunker, который использует $timeout вместо $http для демонстрации.

Ответ 2

Насколько я знаю, вы не можете. Но я все равно не стал бы запускать эту службу. Вот более чистый способ:

.factory('CatalogueService', function($rootScope, $http) {
  // We first define a private API for our service.

  // Private vars.
  var items = [];

  // Private methods.
  function add( id ) {
    $http.put( $rootScope.apiURL, {id:id} )
    .success(function(data,status,headers,config) { items.push(data); })
    .then(function(response) { console.log(response.data); });
  }

  function store( obj ) {
    // do stuff
  }

  function remove( obj ) {
    // do stuff
  }

  // We now return a public API for our service.
  return {
    add: add,
    store: store,
    rm: remove
  };
};

Это очень распространенная схема разработки сервисов в AngularJS и не требует использования this в этих случаях.