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