2012-12-13 17 views
30

Może to być typowy przypadek, w którym musimy wyświetlić komunikat o błędzie/powodzeniu użytkownikowi po aktualizacji/utworzeniu pewnych danych, w jaki sposób możemy go wdrożyć w AngularJS?
Chcę dodać wywołania zwrotne, ale nie mogę znaleźć rozwiązania. Używanie $ http.post(). Success(). Error() działa, ale zastanawiam się, czy mogę to zrobić z zasobem API $ wyższej dźwigni.
Czy powinniśmy napisać dyrektywy lub użyć funkcji $ watch()?
Dzięki za pomoc z góry.

Odpowiedz

50

Operacje z klasy zasobów mogą być przekazywane sukcesów i błędów wywołania zwrotne jak niższym poziomie $ http usług

From the docs

  • HTTP GET "klasa" działania: Resource.action ([parametry], [sukces], [błąd])
  • Działania inne niż GET "klasa": Resource.action ([parametry], postData, [sukces], [błąd])

Niepożądane akcje są poprzedzane prefiksem $.

Więc można to zrobić

User.get({userId:123}, function(u, getResponseHeaders){ 
    // this is get's success callback 
    u.abc = true; 
    u.$save(function(u, putResponseHeaders) { 
    // This is $save's success callback, invoke notification from here 
    }); 
}); 

Edit: oto another example from a previous plunker. Żądanie pobierania nie powiedzie się, ponieważ zażąda nieistniejącego pliku json. Zostanie uruchomione wywołanie zwrotne błędu.

someResource.get(function(data){ 
    console.log('success, got data: ', data);  
}, function(err){ 
    alert('request failed'); 
}); 
+0

Wielkie dzięki! Kolejne pytanie brzmi: jak opakować dane w dane formularzy? rozwiązanie w [tym wpisie] (http://stackoverflow.com/questions/12190166/angularjs-any-way-for-http-post-to-send-request-parameters-instead-of-json) wydaje się nie działać dla metod zasobów (może pracować dla $ http.put). dzięki – Edward

+0

comment = Comment.save ($ scope.newComment, (response) -> console.log ("Comment submitted.")) ... działa też. – mikeborgh

+0

Format dla działań, które nie są odbierane, to Resource.action ([parametry], postData, [sukces], [błąd]). Ale w twoim przykładzie jest to inny u. $ Save (function (u, putResponseHeaders) {.. ......... – Aakash

5

Z najnowszych wersji angularjs, można zajrzeć do $interceptors, które są częścią $httpProvider.

Następnie można przechwycić WSZYSTKIE żądania przed wysłaniem lub po otrzymaniu odpowiedzi.

angular.module('app').config(function($httpProvider){ 

    $httpProvider.interceptors.push(function($q) { 
    return { 
     'request': function(config) { 
     console.log('I will send a request to the server'); 
     return config; 
     }, 

     'response': function(response) { 
     // called if HTTP CODE = 2xx 
     console.log('I got a sucessfull response from server'); 
     return response; 
     } 

     'responseError': function(rejection) { 
     // called if HTTP CODE != 2xx 
     console.log('I got an error from server'); 
     return $q.reject(rejection); 
     } 
    }; 
    }); 

}); 

Należy pamiętać, że trzeba wrócić config lub response aby uzyskać jego pracy.

W przypadku numeru należy odrzucić odrzucenie odrzucone, aby usługa $http.get().error() nadal działała po przechwyceniu.