how to inject scope in httpInterceptor angularjs?

Question

Factory

    .factory('authHttpResponseInterceptor',['$q','$location','$rootScope',function($q,$location, $rootScope){
    return {
        responseError: function(rejection) {
            if (rejection.status === 401) {
                console.error("Response 401 in interceptor ");
                $('.modal-logout').modal({
                    backdrop: 'static',
                    keyboard: false
                });
                $('.modal-logout').modal('show');
            }

            if (rejection.status === 403) {
                console.error("Response 403 in interceptor");
                $scope.errorMessages.push("You are not authorized to perform this action.");
            }

            return $q.reject(rejection);
        },

i want to inject the $scope here to display the 403 error message but i am unable to inject. i want to push the message into my errorMessage array which is defined in controller. how can i achieve the same.

Walfrat · Answer 1 · 2016-04-14T10:16:44.960

By design you can't inject $scope here. Howeer what you want to do is of course possible.

Is you want to be able to show error messages you have two way :

1 - Create a service that will store and display messages alone outside of any controller.

2 - Create a service that will store messages and use a $scope.$watch in your controller to watch them and refresh your view.

Interceptor side : if (rejection.status === 403) { console.error("Response 403 in interceptor"); myService.errorMessages.push("You are not authorized to perform this action."); }

Controller side :

$scope.$watchCollection(function(){
    return myService.errorMessages;
}, 
function(){
   $scope.myMessages = angular.merge([], myService.errorMessages);
   $timeout(function(){
      $scope.myMessages = [];
   }, 3000);

});

The $tiemout is here is you want to clear your messages after 3s of dislaying them, you may not need it.

The 1st function in $watchCollection is the value watched, the second is the callback when it has changed.

thnx for the fast reply can u explain with example it will be helpful i am very new to angularjs. — Sachin Mhaskar, Apr 14 '16 at 10:12

score 0 · Answer 2 · edited May 23 '17 at 12:07

Another way is to use $broadcast to send event to the active controller where you can trap this http error and use accordingly.

.factory('authHttpResponseInterceptor',['$q','$location','$rootScope',function($q,$location, $rootScope){
return {
    responseError: function(rejection) {
        if (rejection.status === 401) {
            console.error("Response 401 in interceptor ");
            $('.modal-logout').modal({
                backdrop: 'static',
                keyboard: false
            });
            $('.modal-logout').modal('show');
        }

        if (rejection.status === 403) {
            console.error("Response 403 in interceptor");
            $rootscope.$broadcast("errorEvnt",{message:"Response 403 in interceptor"});
        }

        return $q.reject(rejection);
    },

Since its not recommended to use rootscope as your event service that can be done through wrapping it up in an event service and injecting it wherever we want to listen on broadcast events. As given below

check it here

how to inject scope in httpInterceptor angularjs?

2 Answers2