12

$mdToast ( Angular Material フレームワーク) ディレクティブを使用して、Angular (-Material) Web アプリでいくつかのステータス メッセージを表示しています。

ユーザーがサインインすると、ログインが成功すると、次の呼び出しによってトーストが表示されます。

     $scope.showToastMessage = function() {
         var toast = $mdToast.simple()
             .content("Login successful);
             .action('OK')
             .highlightAction(false)
             .position($scope.getToastPosition());
          $mdToast.show(toast).then(function(toast) {
                //...
             }
         }); 
     };

ログインが成功した後、別のチェック (有効なセッション Cookie など) を行い、前のトースト メッセージを上書きせずに、前のトースト メッセージが実際に表示された後に別のトースト メッセージを表示する必要があります。

ここで得られる問題は次のとおりです。

  • 2 番目のトーストが新しいトーストの前に表示されます (おそらく $mdTost の非同期の性質による)
  • この 2 番目のトーストは 1 秒未満表示されてから消え、最初のトーストだけが画面に残ります(基本的に、2 番目のトーストが最初に表示され、最初のトーストが表示されると非表示になります)。

解決策は次のいずれかです。

  • then .thenコールバック内に 2 番目のトーストを作成する: これも機能しません。これは、ユーザーが介入して「OK」アクション ボタンを押す必要があるためです。

  • $mdToast.updateContent() の呼び出し; ( https://material.angularjs.org/#/api/material.components.toast/service/ $mdToast) 以前のトースト メッセージを上書きします (これは最善の解決策ではありませんが、どちらでも問題ありません) が、できません方法を理解する:

    (1) 画面に表示されている特定のトーストを選択します (異なる呼び出しでいくつかのトーストが表示されているとします)。

    (2) 遅延 (3 秒としましょう) 後にトースト メッセージを更新して、ログインは成功したが、他の情報があることをユーザーに知らせます。

どんな手掛かり？

4

1 に答える 1