angularjs - 単一のトースター メッセージをクリアする

Question

一度に表示される複数の toastr メッセージのうち、1 つの toastr メッセージを消去/非表示にしたいと考えています。全体/複数の toastr メッセージを同時にクリアするのではなく、回避策はありますか。次のコードを試しましたが、うまくいきません。

toastr.clear([toast]);

参照: https://github.com/Foxandxss/angular-toastr

Answer 1

すでに閉じられた toastrtoastrではなく、 active のみをクリアできます。

例えば：

var openedToast = null;

$scope.openToast = function(){      
  openedToast  = toastr['success']('message 2', 'Title 2');
  toastr['success']('this will be automatically dismissed', 'Another Toast');      
}
//if you click clearToast quickly, it will be cleared. 
$scope.clearToast = function(){
  if(openedToast )
    toastr.clear(openedToast);
   openedToast = null; //you have to clear your local variable where you stored your toast otherwise this will be a memory leak!
}

デモを確認できます

注 - toastrデモ ページtoastr.clear()に示されている例は、メモリ リークの原因となるため、ベスト プラクティスではありません。すべてのトーストは配列に格納されます。10 個のトーストを開くと、配列のサイズは 10 になります。しばらくすると、開いたトーストはなくなりますが、配列はクリアされません。openedToasts

したがって、toastr をこのように実装する場合は、配列に注意する必要があります。配列からアイテムをクリアしたい場合は、そのアイテムがアクティブであることを確認してください。

どうすれば配列をクリアできますか?

配列をクリアするには、トーストごとに destroy イベントを登録します。

  $scope.openedToasts = [];       
  $scope.openToast = function() {
    var toast = toastr['success']('message 1', 'Title 1');
    $scope.openedToasts.push(toast);

    registerDestroy(toast); //we can register destroy to clear the array
  }

  function registerDestroy(toast) {
    toast.scope.$on('$destroy', function(item) {
      $scope.openedToasts = $scope.openedToasts.filter(function(item) {
        return item.toastId !== toast.toastId;
      });
    });
  }

HTML では、長さを確認できます。

<span>array length: {{openedToasts.length}} </span>