使用 http 拦截器响应 Flash 消息

在视图文件中

在我们通常包含角度脚本或在应用程序中共享的 html 的基本 html(index.html) 中，留下一个空的 div 元素，flash 消息将出现在这个 div 元素中

<div class="flashmessage" ng-if="isVisible">
    {{flashMessage}}
</div>

脚本文件

在 angular 模块的 config 方法中，注入 httpProvider，httpProvider 有一个拦截器数组属性，推送自定义拦截器，在当前示例中，自定义拦截器只拦截响应并调用附加到 rootScope 的方法。

var interceptorTest = angular.module('interceptorTest', []);
    
    interceptorTest.config(['$httpProvider',function ($httpProvider) {

        $httpProvider.interceptors.push(["$rootScope",function ($rootScope) {
            return {     //intercept only the response
                        'response': function (response) 
                                    {
                                      $rootScope.showFeedBack(response.status,response.data.message);
                           
                                      return response;
                                    }
                   };
        }]);
        
    }])

由于只有提供者可以注入角度模块的配置方法（即 httpProvider 而不是 rootcope），因此在角度模块的 run 方法中声明附加到 rootscope 的方法。

同时在$ timeout 内显示消息，以便消息具有 flash 属性，该属性在阈值时间后消失。在我们的例子中它是 3000 毫秒。

interceptorTest.run(["$rootScope","$timeout",function($rootScope,$timeout){
     $rootScope.showFeedBack = function(status,message){
        
        $rootScope.isVisible = true;
        $rootScope.flashMessage = message;
        $timeout(function(){$rootScope.isVisible = false },3000)
    }
}]);

常见的陷阱

试图注入 $ rootScope 或任何其他服务的内部配置角度模块的方法，角度应用程序犯规的生命周期允许和未知的提供程序错误将被抛出。只有提供者可以注入角度模块的配置方法