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)
...

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

回答1:

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

So your code in order to work should be:

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

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

回答2:

I don't know why the answer above was down-voted. If you set hideDelay to 0, it won't hide the toast as I have experienced it. I had this issue too but my own case was a comma after the last property's value which happen to be the hideDelay property.

I suggest you set a value higher than zero and doing that, I don't think you will need to call $mdToast.hide() again.

Doing this just works fine for me:

$mdToast.show({
  template: '<md-toast class="md-warn">Test</md-toast>',
  hideDelay: 2000
});

It shows the toast message and hides it after 2seconds

EDIT:

Also, consider checking the version of your hammerjs any version above 2.0.0 should be fine IMO

回答3:

You've set hideDelay to 0. I recommend setting it to 6000. 0 means never hide.

来源：https://stackoverflow.com/questions/26927747/how-to-hide-angular-material-mdtoast

标签

javascript

angularjs

toast