如何隐藏Angular Material mdToast？ [英] How to hide Angular Material mdToast?

问题描述

app.controller('testCtrl', function ($rootScope, $scope, $mdToast) 
{   
    $scope.showHideToast = function () {
        $mdToast.show({
                template: '<md-toast>test</md-toast>',
                hideDelay: 0,
                position: 'bottom right'
          });

        // DO STUFF

        $mdToast.hide();
}

吐司出现但没有隐藏。
我得到这种类型错误：

The toast is showing up but not hiding. I get this typeError:

TypeError: undefined is not a function
at Object.onRemove (../angular-material/angular-material.js:4240:13)
at Object.InterimElement.self.remove (../angular-material/angular-material.js:5103:29) 
at Object.hide (../angular-material/angular-material.js:5032:40)
...

为什么这不适用于Angular Material？
任何方式让这个工作吗？

Why is this not working in Angular Material? Any way to make this work?

推荐答案

真正的问题是你如何使用隐藏方法，它可以选择在输入中接收要解决的承诺。

The real problem is how you are using the hide method, it can optionally receive in input a promise to be resolved.

所以你的代码应该是：

app.controller('testCtrl', function ($rootScope, $scope, $mdToast) 
{   
    $scope.showHideToast = function () {
        // hold the reference
        var myToast = $mdToast.show({
                        template  : '<md-toast>test</md-toast>',
                        hideDelay : 0,
                        position  : 'bottom right'
                      });

        // DO STUFF

        // hide the toast
        $mdToast.hide(myToast);
   };
}

调用隐藏这种方法以这种方式关闭先前定义的toast，即使它是用 hideDelay：0 定义的。

Calling the hide method in this way closes the previously defined toast, even if it was defined with hideDelay: 0.

这篇关于如何隐藏Angular Material mdToast？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！