AngularJS Example

by maxisam

HTML

<div ng-app="myApp" class="myBody">
  <div class="notification-bar"></div>
  <div ng-controller="myCtrl">
    Enter message: <input type="text" ng-model="message"><br>
      <button ng-click="post(message)">Press me for 5 second notification</button>
  </div>
  <div ng-controller="myCtrl2">
    Enter message: <input type="text" ng-model="message"><br>
      <button ng-click="post(message)">Press me for 1 second notification</button>
  </div>
  <div random-directive color="red">I'm red! See what happens!</div>
  <div random-directive color="green">I'm green! See what happens!</div>
  <div random-directive color="slategrey">I'm Slate Grey! See what happens!</div>
</div>

CSS

.ng-invalid { border: 1px solid red; }
.myBody { }
.notification-bar { position:fixed; bottom:2em; left:2em; width:8em;}
.notification-message { 
    min-height: 1.5em; 
    margin-top:3px; 
    opacity:0; 
    width:100%; 
    text-align:center; 
    background-color:cornflowerblue; 
    color:white;
    border: solid 1px transparent;
    -webkit-transition:opacity 1s ease-in-out;
    -moz-transition:opacity 1s ease-in-out;
    -o-transition:opacity 1s ease-in-out;
    transition:opacity 1s ease-in-out;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    padding:3px;
}
.notification-message.show { opacity:1; }
.notification-message.red { background-color:red; }
.notification-message.green { background-color:green; }
.notification-message.slategrey { background-color:slategrey; }
.notification-message > a {float:right; color:white;}
.notification-message > div { font-size:smaller; }
.notification-message:hover { border: solid 1px white; }
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<style>

JavaScript

angular.module("jv-NotificationBar", [])
.value("startingAnimationTime", 1000)
.value("endingAnimationTime", 1000)
.service("NotificationBar", function($timeout, $compile, $rootScope, startingAnimationTime) {
    var domElement;
    
    this.PostMessage = function(message, timeToLinger, cssToApply) {
        cssToApply = cssToApply || "";
        timeToLinger = startingAnimationTime + timeToLinger;
        var template = angular.element(
            "<div class=\"notification-message "+cssToApply+"\" time=\""+timeToLinger+"\">"+message+"</div>");
        var newScope = $rootScope.$new();
        domElement.append($compile(template)(newScope));
    };
    
    this.RegisterDOM = function(element) {
    	domElement = element;
    };
    
})
.service("5SecondNotificationBar", function(NotificationBar) {
    this.PostMessage = function(message, cssToApply) {
        NotificationBar.PostMessage(message, 5000, cssToApply);
    };
})
.service("20SecondNotificationBar", function(NotificationBar) {
    this.PostMessage = function(message, cssToApply) {
        NotificationBar.PostMessage(message, 20000, cssToApply);
    };
})
.service("1SecondNotificationBar", function(NotificationBar) {
    this.PostMessage = function(message, cssToApply) {
        NotificationBar.PostMessage(message, 1000, cssToApply);
    };
})
.service("GenericNotificationBar", function(NotificationBar) {
    this.PostMessage = function(message) {
        NotificationBar.PostMessage(message, 0, "");
    };
})
.directive("notificationBar", function(NotificationBar) {
    return {
        restrict:"C",
        link: function(sc, el) {
            NotificationBar.RegisterDOM(el);
        }
    }
})
.directive("notificationMessage", function($timeout, endingAnimationTime) {
    return {
        restrict:"C",
        transclude:true,
        template: "<a href=\"javascript:void(0)\" ng-click=\"close()\">x</a><div ng-transclude></div>",
        link: function(scope, el, attr) {
            var...