<!DOCTYPE html>
<html ng-app="app">
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="toastrCtrl as vm">
<h1>Toasters...</h1>
<hr />
<div>
<button class="btn btn-info" ng-click="vm.info()">Info</button>
<button class="btn btn-warning" ng-click="vm.warning()">Warning</button>
<button class="btn btn-success" ng-click="vm.success()">Success</button>
<button class="btn btn-danger" ng-click="vm.error()">Error</button>
<button class="btn btn-primary" ng-click="vm.clear()">Clear</button>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
(function() {
angular
.module('app', [])
.controller('toastrCtrl', toastrCtrl);
function toastrCtrl() {
var vm = this;
vm.name = 'test';
vm.setOptions = function() {
toastr.options.positionClass = "toast-bottom-right";
toastr.options.closeButton = true;
toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
//toastr.options.newestOnTop = false;
toastr.options.progressBar = true;
};
vm.setOptions();
vm.info = function() {
toastr.info('This is an info toaster');
};
vm.warning = function() {
toastr.warning('This is a warning toaster');
};
vm.success = function() {
toastr.success('This is a success toaster');
};
vm.error = function() {
toastr.error('This is an error toaster');
};
vm.clear = function() {
toastr.clear();
};
};
})();
/* Styles go here */