Функция обслуживания 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
в этих случаях.