Angular factory to show either Cordova Toast plugin or a self-closing Ionic popup, so that you can develop with Toast on web and on device

Ionic Cordova Toast

	// Requires the Toast plugin: https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin
	// And Ionic Framework: http://ionicframework.com
	// ngCordova is used here, but easily removed: http://ngcordova.com/
	
	// When running in Cordova, show the native toast. Outside of Cordova, show an Ionic Popup for the same period of time. 
	// Uses the API for the Toast plugin - message, duration, position. 
	// Differences are that: Ionic Popup ignores position, and doesn't allow doing anything while it shows. 
	.factory('Toast', function($rootScope, $timeout, $ionicPopup, $cordovaToast) {
	    return {
	        show: function (message, duration, position) {
	        	message = message || "There was a problem...";
	        	duration = duration || 'short';
	        	position = position || 'top';

	        	if (!!window.cordova) {
	        		// Use the Cordova Toast plugin
					$cordovaToast.show(message, duration, position);	        		
	        	}
	        	else {
                    if (duration == 'short') {
                        duration = 2000;
                    }
                    else {
                        duration = 5000;
                    }

  					var myPopup = $ionicPopup.show({
  						template: "<div class='toast'>" + message + "</div>",
  						scope: $rootScope,
  						buttons: []
  					});
  
  					$timeout(function() {
  						myPopup.close(); 
  					}, duration);
	        	}
			}
		};
	})

Awesome man! 😀

gracias amigo

Thanks - this was perfect!

Hi rajat i am new to angular can you please share a codepen/plunker here and show how to call this inside the controller, i have done all the injection but inside a function of the controller how do i call it as when i use $scope.Toast() it says its not a function, when i use $Toast it shows some other error.

I was been searching for a toast notification plugin for my project. I have created a bower component for toast. Please have a look at the bower component i have created. I think it might help you.

Cute little code snippet... Thanks....

Thanks!

I think the actual popup from ionic looks better if you user subTitle instead of template.

    var myPopup = $ionicPopup.show({
      subtitle: message,
      scope: $rootScope,
      buttons: []
    });

I used the $ionicLoading, it don't needs close.

$ionicLoading.show({template: message, noBackdrop: true, duration: duration});

Thanks!