javascript - 如何隐藏 Angular Material mdToast？

Question

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();
}

toast 显示但不隐藏。我得到这个类型错误:

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 中不起作用？有什么方法可以使它起作用吗？

Answer 1

真正的问题是您如何使用 hide 方法，它可以选择在输入中接收要解决的 promise 。

所以你的代码为了工作应该是:

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);
   };
}

以这种方式调用hide方法会关闭之前定义的toast，即使它是用hideDelay: 0定义的。