Created
July 17, 2015 19:49
-
-
Save anonymous/765eab94a5bf9c759c27 to your computer and use it in GitHub Desktop.
JS Bin Trigger toasters on events // source http://jsbin.com/lerajit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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