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 · Accepted Answer · 2016-04-14 10:16:44Z

1

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.

edited Apr 14, 2016 at 10:16

answered Apr 14, 2016 at 10:07

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sachin Mhaskar Over a year ago

thnx for the fast reply can u explain with example it will be helpful i am very new to angularjs.

Community · Accepted Answer · 2017-05-23 12:07:40Z

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

Collectives™ on Stack Overflow

how to inject scope in httpInterceptor angularjs?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related