AngularJS Http Interceptor, Show Bootstrap Alert

Question

i like to show an alert box every time a request is done. To shorten my way i like to use the 'Bootstrap Alert'. There seems to be no way to access on any scope inside a factory. How can i realize something like this ?

app.factory('httpInterceptor', function ($q) {
    return {
        // On request success
        request: function (config) {
            $scope.alerts.push({msg: "Request done !"}); //There is no scope
            return config || $q.when(config);
        },
        // On request failure
        requestError: function (rejection) {
            return $q.reject(rejection);
        },
        // On response success
        response: function (response) {
            return response || $q.when(response);
        },
        // On response failure
        responseError: function (rejection) {
            return $q.reject(rejection);
        }
    };
});

See Alert Example on http://angular-ui.github.io/bootstrap/

I think you can inject $rootScope here. Try it. Use the $rootScope.$broadcast method to raise an event and catch it in some controller to show the later. — Chandermani
– Chandermani, Commented Dec 10, 2013 at 10:04

artur grzesiak · Accepted Answer · 2013-12-10 11:29:19Z

1

You can create a service that will be injected into the interceptor and the scope:

.factory('alerts',

function () {

    var alerts = [];

    return {

        getAlerts: function () {
            return alerts;
        },

        addAlert: function (msg) {
            alerts.push({ msg: msg });
        },

        closeAlert: function (index) {
            alerts.splice(index, 1);
        }
    }
 })

In the controller of the scope use it like that:

function($scope, alerts) {
    $scope.alerts = alerts.getAlerts();
}

And in the interceptor itself:

alerts.addAlert('msg');

answered Dec 10, 2013 at 11:29

artur grzesiak

20.9k5 gold badges49 silver badges57 bronze badges

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

Comments

Roy M J · Accepted Answer · 2014-08-27 10:42:26Z

I know this question is quite old and perhaps the OP has found better solution, but i am providing the answer here as a reference to those who have not found a solution.

We can make use of $broadcast method available with bootstrap. Read more about $broadcast here : https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast

app.factory('httpInterceptor', function ($q) {
    return {
        // On request success
        request: function (config) {
            $rootScope.$broadcast("requestDone");               
            return config || $q.when(config);
        },
        // On request failure
        requestError: function (rejection) {
            return $q.reject(rejection);
        },
        // On response success
        response: function (response) {
            return response || $q.when(response);
        },
        // On response failure
        responseError: function (rejection) {
            return $q.reject(rejection);
        }
    };
});

In your controller, just listen for the event as :

$rootScope.$on("loginStatus", function(e) {
  $scope.alerts.push({msg: "Request done !"}); //There is scope  
});

Cheers!!

Collectives™ on Stack Overflow

AngularJS Http Interceptor, Show Bootstrap Alert

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related