Created
July 28, 2014 14:19
-
-
Save typesafe/73c1ee381a9d41587f6d to your computer and use it in GitHub Desktop.
AngularJS $alerts module
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
| (function(angular) { | |
| var alertsModule = angular.module('alerts', []); | |
| alertsModule.service('$alerts', ['$rootScope', '$q', function($rootScope, $q){ | |
| var _this = this; | |
| var broadcast = function(topic, clazz, data){ | |
| var d = $q.defer(); | |
| $rootScope.$broadcast(topic, angular.extend({clazz: clazz, deferred: d}, data)); | |
| return d.promise; | |
| }; | |
| var createFunc = function(type){ | |
| return function(topic, title, message){ | |
| return broadcast(topic, 'alert-' + type, {title: title, message:message}); | |
| }; | |
| }; | |
| angular.forEach(['info', 'warn', 'error', 'success'], function(type){ | |
| _this[type] = createFunc(type); | |
| }); | |
| }]); | |
| alertsModule.directive('alerts', ['$rootScope', '$timeout', function($rootScope, $timeout){ | |
| return { | |
| restrict: 'E', | |
| replace: true, | |
| scope:{}, | |
| template: '<div ng-repeat="alert in _alerts" class="alert alert-block transition {{alert.clazz}}">' + | |
| '<button type="button" class="close" ng-click="_close($index)">×</button>' + | |
| '<h4>{{alert.title}}</h4>' + | |
| '{{alert.message}}' + | |
| '</div>', | |
| link: function(scope, el, attrs) { | |
| var alertChannel = attrs.topic || "alertChannel"; | |
| scope._alerts = []; | |
| scope._close = function(index){ | |
| scope._alerts[index].deferred.resolve(); | |
| scope._alerts.splice(index, 1); | |
| }; | |
| $rootScope.$on(alertChannel, function(event, data) { | |
| var timeout = data.timeout || attrs.timeout; | |
| scope._alerts.push(data); | |
| if(timeout){ | |
| $timeout(function() { | |
| scope._close(scope._alerts.indexOf(data)); | |
| }, timeout); | |
| } | |
| }); | |
| } | |
| }; | |
| }]); | |
| })(window.angular); |
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', ['alerts']); | |
| app.controller('Ctrl', ['$scope', '$alerts', function($scope, $alerts) { | |
| $scope.clicked = ''; | |
| $scope.error = function() { | |
| $alerts | |
| .error('alertChannel', 'Error', 'Something went wrong') | |
| .then(function(){ alert('closed'); }); }; | |
| $scope.success = function() { | |
| $alerts.success('foo', 'foo', 'bar'); | |
| }; | |
| $scope.info = function() { | |
| $alerts.info('foo', 'foo', 'bar'); | |
| }; | |
| $scope.warn = function() { | |
| $alerts.warn('foo', 'foo', 'bar'); | |
| }; | |
| }]); |
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 lang="en"> | |
| <meta charset="utf-8"> | |
| <title>Bootstrap Table Directive</title> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> | |
| <script src="app.js"></script> | |
| <script src="alerts.js"></script> | |
| <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" | |
| rel="stylesheet"> | |
| <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script> | |
| <style> | |
| table.cell-highlight > tbody > tr:hover { | |
| opacity: 0.5; | |
| -webkit-transition: opacity 0.15s linear; | |
| -moz-transition: opacity 0.15s linear; | |
| -o-transition: opacity 0.15s linear; | |
| transition: opacity 0.15s linear; | |
| } | |
| </style> | |
| </head> | |
| <body ng-controller="Ctrl"> | |
| <p> | |
| Alert with topic foo (success, info and warn) are shown here: | |
| </p> | |
| <alerts topic='foo' timeout="5000"></alerts> | |
| <p> | |
| By default they are shown here and use a callback | |
| to show alert when closed. | |
| </p> | |
| <alerts></alerts> | |
| <button class="btn btn-info" ng-click="info()">Info</button> | |
| <button class="btn btn-warning" ng-click="warn()">Warn</button> | |
| <button class="btn btn-danger" ng-click="error()">Error</button> | |
| <button class="btn btn-success" ng-click="success()">Success</button> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment