Angular Toaster

by Ravindra Athreya

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.16/toaster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.16/toaster.min.js"></script>
<body ng-app='myApp'>
    <toaster-container></toaster-container>
    <div ng-controller='MyController'>
        <button ng-click="pop()">Show a Toaster</button>
    </div>
</body>

JavaScript

var myApp = angular.module('myApp', ['ngAnimate', 'toaster']);
myApp.controller('MyController', function ($scope, toaster) {
    $scope.pop = function () {
        toaster.pop('success', "title", "text",2000);
    };
    
    // (type, title, body, timeout, bodyOutputType, clickHandler)
    // toaster.pop('success','Redirecting to paypal',null,'5000','toast-top-full-width');
});