|
<!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> |
