Skip to content

Instantly share code, notes, and snippets.

Created July 17, 2015 19:49
Show Gist options
  • Save anonymous/765eab94a5bf9c759c27 to your computer and use it in GitHub Desktop.
Save anonymous/765eab94a5bf9c759c27 to your computer and use it in GitHub Desktop.
JS Bin Trigger toasters on events // source http://jsbin.com/lerajit
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="description" content="Trigger toasters on events">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.15/toaster.min.css" rel="stylesheet" />
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.15/toaster.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<toaster-alerts></toaster-alerts>
<div ng-controller="notify as n">
<div class="form-inline">
<select class="form-control" ng-model="n.model.type" ng-options="t for t in n.types"></select>
<input class="form-control" ng-model="n.model.title">
<input class="form-control" ng-model="n.model.msg">
<button class="btn btn-primary" ng-click="n.createAlert()">Create Alert</button>
</div>
</div>
<script id="jsbin-javascript">
var app = angular.module('myApp', ['toaster', 'ngAnimate']);
app.controller('notify', function($rootScope){
var self = this;
this.model = {
type: null,
title: 'Alert',
msg: 'Test Message'
};
this.types = ['info', 'success', 'warning', 'error'];
this.createAlert = function(){
$rootScope.$broadcast('alertEvent', self.model.type, self.model.title, self.model.msg);
};
});
app.controller('alertCtrl', function($scope, toaster){
var types = ['info', 'success', 'warning', 'error'];
$scope.$on('alertEvent', function(event, type, title, msg, timeout){
type = (type in types) ? 'info' : type;
timeout = (typeof timeout === 'undefined') ? 5000 : timeout;
toaster.pop({
type: type || 'info',
title: title,
body: msg,
timeout: timeout,
showCloseButton: true
});
});
});
app.directive('toasterAlerts', function(){
return {
restrict: 'E',
controller: 'alertCtrl',
template: '<toaster-container></toaster-container>'
};
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('myApp', ['toaster', 'ngAnimate']);
app.controller('notify', function($rootScope){
var self = this;
this.model = {
type: null,
title: 'Alert',
msg: 'Test Message'
};
this.types = ['info', 'success', 'warning', 'error'];
this.createAlert = function(){
$rootScope.$broadcast('alertEvent', self.model.type, self.model.title, self.model.msg);
};
});
app.controller('alertCtrl', function($scope, toaster){
var types = ['info', 'success', 'warning', 'error'];
$scope.$on('alertEvent', function(event, type, title, msg, timeout){
type = (type in types) ? 'info' : type;
timeout = (typeof timeout === 'undefined') ? 5000 : timeout;
toaster.pop({
type: type || 'info',
title: title,
body: msg,
timeout: timeout,
showCloseButton: true
});
});
});
app.directive('toasterAlerts', function(){
return {
restrict: 'E',
controller: 'alertCtrl',
template: '<toaster-container></toaster-container>'
};
});</script></body>
</html>
var app = angular.module('myApp', ['toaster', 'ngAnimate']);
app.controller('notify', function($rootScope){
var self = this;
this.model = {
type: null,
title: 'Alert',
msg: 'Test Message'
};
this.types = ['info', 'success', 'warning', 'error'];
this.createAlert = function(){
$rootScope.$broadcast('alertEvent', self.model.type, self.model.title, self.model.msg);
};
});
app.controller('alertCtrl', function($scope, toaster){
var types = ['info', 'success', 'warning', 'error'];
$scope.$on('alertEvent', function(event, type, title, msg, timeout){
type = (type in types) ? 'info' : type;
timeout = (typeof timeout === 'undefined') ? 5000 : timeout;
toaster.pop({
type: type || 'info',
title: title,
body: msg,
timeout: timeout,
showCloseButton: true
});
});
});
app.directive('toasterAlerts', function(){
return {
restrict: 'E',
controller: 'alertCtrl',
template: '<toaster-container></toaster-container>'
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment