HttpRequestInterceptor複数回表示で同じエラーが発生する

Question

リクエストが失敗するたびにtoastrを表示するようにAngularJSアプリにHttpRequestInterceptorを追加しました。特定のページで

angular.module('spwApp.factories') 
    .factory('httpRequestInterceptor', ['$q', '$injector', '$cookies', '$rootScope', function($q, $injector, $cookies, $rootScope) { 
     return { 
      'request': function($config) { 
       var token = $cookies.get('token'); 
       $config.headers['Authorization'] = 'Bearer ' + token; 
       return $config; 
      }, 
      'responseError': function(rejection) { 
       var toastr = $injector.get('toastr'); 
       var $state = $injector.get('$state'); 
       toastr.options = { 
        "closeButton" : true, 
        "preventDuplicates" : true, 
        "timeOut": "50000", 
        "extendedTimeOut" : "50000" 
       }; 
       toastr.remove(); 
       switch (rejection.status) { 
        case 401: 
         if ($state.current.name != 'login') { 
          $state.go('login'); 
          toastr.info('Re-enter username/password', 'Invalid sessions', toastr.options); 
         } 
         break; 
        case 403: 
         toastr.error('You do not have the rights', 'Forbidden', toastr.options) 
         $state.go('home'); 
         break; 
        case 404: 
         toastr.error('Cannot found', '??', toastr.options); 
         $state.go('home'); 
         break; 
        case 500: 
         toastr.error('Unexpected error', 'Hum...', toastr.options); 
         $state.go('home'); 
         break; 
        case -1: 
         toastr.error('Connection to server not possible', 'Ouch...', toastr.options); 
         $state.go('home'); 
         break; 
        default: 
         toastr.error('That is not supposed to land here', 'Oops...', toastr.options); 
         $state.go('home'); 
         break; 
       } 
       return $q.reject(rejection); 
      } 
     }; 
    }]); 

、私は

.state('stateA', { 
    url: '/urlToStateA', 
    views: { 
     'content@stateA': { 
      templateUrl: 'app/stateA.html', 
      controller: 'controllerA', 
      controllerAs: 'vm', 
      resolve: { 
       dataA: ['myService', function(myService) { 
        return myService.getDataA(); 
       }], 
       dataB: ['myService', function(myService) { 
        return myService.getDataB(); 
       }], 
       dataC: ['myService', function(myService) { 
        return myService.getDataC(); 
       }] 
      } 
     } 
    } 
}) 

このように自分のサーバーをオフにすると私のサーバーから複数のデータを解決する必要があり、各要求はrejection.status == -1を取得し、toastrが表示されますConnection to server not possible

問題は、​​という行が機能しないことです。すべてのトーストを取り除くことになっていますが、何もしません。

新しいトーストを追加する前にトーストを削除するにはどうすればよいですか？ toastr.remove()を純粋なjavascriptで置き換えて、手動でtoastrを選択して削除することはできますか？

Answer 1

さらに開くことを防ぐために、configuration changesをいくつか作ってください。toastr'sは同時に開きます。

toastr configurationsは、configの角度の機能で変更することができます。

myApp.config(Config); 

    function Config($httpProvider,toastrConfig) { 

    $httpProvider.interceptors.push('interceptorService'); 

    angular.extend(toastrConfig, { 
     autoDismiss: false, 
     containerId: 'toast-container', 
     maxOpened: 0,  
     newestOnTop: true, 
     positionClass: 'toast-top-center', 
     preventDuplicates: false, 
     preventOpenDuplicates: true, 
     target: 'body' 
    }); 

    } 

preventOpenDuplicates: trueこのラインは、複数回表示から同じメッセージを防止します。 Customizing the toastr link reference

• autoDismissから

  ：設定されている場合は、唯一の最も最近のmaxOpenedトースト（S）

• containerIdはを表示：あなたが乾杯を追加するコンテナの名前（コンテナが作成されます）。
• maxOpened：一度に表示されるトーストの最大数。
• newestOnTop：古いトーストの上に新しいトーストを追加します。それらを底に置くために偽にする。
• ポジションクラス：トーストが追加される位置。
• preventDuplicates：最後のトーストの重複を防止します。
• preventOpenDuplicates：オープントーストの重複を防止します。
• ターゲット：トースト容器を入れる要素。