12

我正在使用$mdToast(Angular Material 框架)指令在我的 Angular(-Material) Web 应用程序中显示几条状态消息。

当用户登录时,如果登录成功,则通过调用以下方式显示 toast:

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

登录成功后,我需要进行另一次检查(例如有效的会话 cookie)并显示另一条 toast 消息,而不覆盖前一条消息,并且在实际显示前一条消息之后。

我在这里遇到的问题是:

  • 第二个 toast 显示新 toast 之前(可能是由于 $mdTost 的异步性质)
  • 这第二个吐司显示不到一秒钟,然后消失,只在屏幕上留下一个(基本上第二个先显示,然后在第一个出现时隐藏)

解决方案可能是:

  • 在 then .then回调中创建第二个 toast :这也不起作用,因为需要用户干预才能按下“确定”操作按钮
  • 调用$mdToast.updateContent(); https://material.angularjs.org/#/api/material.components.toast/service/ $mdToast )这将覆盖以前的 toast 消息(这不是最好的解决方案,但也可以)但我不能弄清楚如何:

    (1)选择屏幕上显示的特定吐司(假设我有几个由不同调用显示的吐司),以及

    (2) 在延迟(比如 3 秒)后更新 toast 消息,以显示让用户了解登录成功但还有一些其他信息。

有什么线索吗?

4

1 回答 1

6

我不确定你是否想同时展示两个祝酒词。如果您想按顺序显示,您可以将第二个 toast 调用放在 then 中,因为操作 (OK) 解决了第一个 toast 的承诺。这是我尝试过的:

    var toast = $mdToast.simple()
      .content('top left')
      .action('OK')
      .highlightAction(false)
      .position($scope.getToastPosition());
    var toast2 = $mdToast.simple()
      .content('Checking some other things')
      .highlightAction(false)
      .position('top left');


    $mdToast.show(toast).then(function() {
       $mdToast.show(toast2);
    });

请参阅此CodePen

于 2015-05-14T19:28:15.063 回答