AngularJSサービスのhttp成功機能、間違った使用<code>$http.put</code>の「この」スコープ

Question

成功機能は、それが内部と呼ばれていたサービスのthis範囲にアクセスすることはできません。 PUTリクエストからコールバックのサービスのプロパティを更新する必要があります。

これは私がサービスで何をしようとしているの削減例です：JSに多少の誤差がある場合

は

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

申し訳ありませんが、主なポイントは、私はサービスの適用範囲へのアクセス方法です成功コールバックの中から？

EDIT：この質問への答えが正しかった一方でジョシュとマークの両方が、私の知る限りでは、それを

Answer 1

変数の上にクロージャを作成します（多くの場合thatと呼ばれる）あなたのコールバック関数は、あなたのサービスオブジェクトにアクセスする必要がありますようにthisに割り当てられている。ここで

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

は$タイムアウトを使用していますPlunkerの代わりでありますデモンストレーションする$ http。

Answer 2

を推奨されているように、私はあなたができない、factory方法に切り替えます。しかし、私はとにかくその方法でサービスを実行しようとはしません。ここでクリーンな方法は次のとおりです。

.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のいずれかを使用する必要はありません。