Angular-Notifications

gistfile1.js

angular.module('notifications', []).factory('$notification', [
  '$timeout',
  function ($timeout) {
    console.log('notification service online');
    var notifications = JSON.parse(localStorage.getItem('$notifications')) || [], queue = [];
    var settings = {
        info: {
          duration: 5000,
          enabled: true
        },
        warning: {
          duration: 5000,
          enabled: true
        },
        error: {
          duration: 5000,
          enabled: true
        },
        success: {
          duration: 5000,
          enabled: true
        },
        progress: {
          duration: 0,
          enabled: true
        },
        custom: {
          duration: 35000,
          enabled: true
        },
        details: true,
        localStorage: false,
        html5Mode: false,
        html5DefaultIcon: 'icon.png'
      };
    function html5Notify(icon, title, content, ondisplay, onclose) {
      if (window.webkitNotifications.checkPermission() === 0) {
        if (!icon) {
          icon = 'favicon.ico';
        }
        var noti = window.webkitNotifications.createNotification(icon, title, content);
        if (typeof ondisplay === 'function') {
          noti.ondisplay = ondisplay;
        }
        if (typeof onclose === 'function') {
          noti.onclose = onclose;
        }
        noti.show();
      } else {
        settings.html5Mode = false;
      }
    }
    return {
      disableHtml5Mode: function () {
        settings.html5Mode = false;
      },
      disableType: function (notificationType) {
        settings[notificationType].enabled = false;
      },
      enableHtml5Mode: function () {
        settings.html5Mode = this.requestHtml5ModePermissions();
      },
      enableType: function (notificationType) {
        settings[notificationType].enabled = true;
      },
      getSettings: function () {
        return settings;
      },
      toggleType: function (notificationType) {
        settings[notificationType].enabled = !settings[notificationType].enabled;
      },
      toggleHtml5Mode: function () {
        settings.html5Mode = !settings.html5Mode;
      },
      requestHtml5ModePermissions: function () {
        if (window.webkitNotifications) {
          console.log('notifications are available');
          if (window.webkitNotifications.checkPermission() === 0) {
            return true;
          } else {
            window.webkitNotifications.requestPermission(function () {
              if (window.webkitNotifications.checkPermission() === 0) {
                settings.html5Mode = true;
              } else {
                settings.html5Mode = false;
              }
            });
            return false;
          }
        } else {
          console.log('notifications are not supported');
          return false;
        }
      },
      getAll: function () {
        return notifications;
      },
      getQueue: function () {
        return queue;
      },
      info: function (title, content, userData) {
        console.log(title, content);
        return this.awesomeNotify('info', 'info', title, content, userData);
      },
      error: function (title, content, userData) {
        return this.awesomeNotify('error', 'remove', title, content, userData);
      },
      success: function (title, content, userData) {
        return this.awesomeNotify('success', 'ok', title, content, userData);
      },
      warning: function (title, content, userData) {
        return this.awesomeNotify('warning', 'exclamation', title, content, userData);
      },
      awesomeNotify: function (type, icon, title, content, userData) {
        return this.makeNotification(type, false, icon, title, content, userData);
      },
      notify: function (image, title, content, userData) {
        return this.makeNotification('custom', image, true, title, content, userData);
      },
      makeNotification: function (type, image, icon, title, content, userData) {
        var notification = {
            'type': type,
            'image': image,
            'icon': icon,
            'title': title,
            'content': content,
            'timestamp': +new Date(),
            'userData': userData
          };
        notifications.push(notification);
        if (settings.html5Mode) {
          html5Notify(image, title, content, function () {
            console.log('inner on display function');
          }, function () {
            console.log('inner on close function');
          });
        } else {
          queue.push(notification);
          $timeout(function removeFromQueueTimeout() {
            queue.splice(queue.indexOf(notification), 1);
          }, settings[type].duration);
        }
        this.save();
        return notification;
      },
      save: function () {
        if (settings.localStorage) {
          localStorage.setItem('$notifications', JSON.stringify(notifications));
        }
      },
      restore: function () {
      },
      clear: function () {
        notifications = [];
        this.save();
      }
    };
  }
]).directive('notifications', [
  '$notification',
  '$compile',
  function ($notification, $compile) {
    console.log('this is a new directive');
    var html = '<div class="dr-notification-wrapper" ng-repeat="noti in queue">' + '<div class="dr-notification-close-btn" ng-click="removeNotification(noti)">' + '<i class="icon-remove"></i>' + '</div>' + '<div class="dr-notification">' + '<div class="dr-notification-image dr-notification-type-{{noti.type}}" ng-switch on="noti.image">' + '<i class="icon-{{noti.icon}}" ng-switch-when="false"></i>' + '<img ng-src="{{noti.image}}" ng-switch-default />' + '</div>' + '<div class="dr-notification-content">' + '<h3 class="dr-notification-title">{{noti.title}}</h3>' + '<p class="dr-notification-text">{{noti.content}}</p>' + '</div>' + '</div>' + '</div>';
    function NotificationsCtrl($scope) {
      $scope.queue = $notification.getQueue();
      $scope.removeNotification = function (noti) {
        $scope.queue.splice($scope.queue.indexOf(noti), 1);
      };
    }
    function link(scope, element, attrs) {
      var position = attrs.notifications;
      position = position.split(' ');
      element.addClass('dr-notification-container');
      for (var i = 0; i < position.length; i++) {
        element.addClass(position[i]);
      }
    }
    return {
      restrict: 'A',
      scope: {},
      template: html,
      link: link,
      controller: NotificationsCtrl
    };
  }
]);

how to use it?

how to use it?