使用 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 或任何其他服務的內部配置角度模組的方法，角度應用程式犯規的生命週期允許和未知的提供程式錯誤將被丟擲。只有提供者可以注入角度模組的配置方法