Question

我希望每次请求都显示一个警告框。为了缩短我的方式，我想使用'Bootstrap Alert'。似乎没有办法访问工厂内的任何范围。我怎么能意识到这样的事情？

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);
        }
    };
});

请参阅http://angular-ui.github.io/bootstrap/

上的提醒示例

Answer 1

您可以创建一个将注入拦截器和范围的服务：

.factory('alerts',

function () {

    var alerts = [];

    return {

        getAlerts: function () {
            return alerts;
        },

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

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

在范围的控制器中使用它：

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

在拦截器本身：

alerts.addAlert('msg');

Answer 2

我知道这个问题很老，也许OP找到了更好的解决方案，但我在这里提供答案作为对那些没有找到解决方案的人的参考。

我们可以使用bootstrap提供的 $ broadcast 方法。在此处阅读有关$ broadcast的更多信息：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);
        }
    };
});

在您的控制器中，只需按以下方式收听事件：

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

干杯!!

AngularJS Http Interceptor，Show Bootstrap Alert

2 个答案: