HOW TO USE BOOTSTRAP STICKY NOTIFICATIONS ANGULARJS SERVICE.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 742  View(s)
Ratings:
Rate this:
How to use Bootstrap Sticky Notifications AngularJS Service. please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use Bootstrap Sticky Notifications AngularJS Service.

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Forum</title>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
        <script src="~/Scripts/jquery-2.1.4.js"></script>
        <script src="~/Scripts/angular.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
        <style>
            .alerts div {
                float: none;
            }

            .ng-scope {
                width: 350px;
                float: right;
                margin-top: 10px;
                margin-bottom:10px;
            }
            .alert {
                width:400px;
                margin-top:5px;
            }
        </style>
        <script>
            (function () {
                //Module 
                var sample = angular.module('notifyApp', ['ngRoute']);

                sample.service('notifications', ['$rootScope', function ($rootScope) {
                    var queue = [];
                    return {
                        queue: queue,
                        add: function (item) {
                            var index = -1;
                            //check alert with same body not active in dom 
                            for (var i = 0; i < this.queue.length; i++) {
                                if (queue[i].body == item.body) {
                                    index = i;
                                    break;
                                }
                            }
                            if (index != -1)
                                return;
                            queue.push(item);
                            setTimeout(function () {
                                $('.alerts .alert').eq(0).remove();
                                queue.shift();
                            }, 3000);
                        },
                        pop: function (item) {
                            var index = -1;
                            //to find alert from queue of active alerts in dom 
                            for (var i = 0; i < this.queue.length; i++) {
                                if (queue[i].body == item) {
                                    index = i;
                                    break;
                                }
                            }
                            if (index != -1)
                                queue.splice(index, 1);
                            return this.queue;
                        }
                    };
                }
                ]);

                //Controller 
                sample.controller('notifyController', function ($scope, notifications) {

                    $scope.notify = notifications;
                    $scope.closeAlert = function (item) {
                        notifications.pop(item);
                    }

                    $scope.info = function () {
                        setNotification(notifications, 'info', 'information', 'TOUS LES BIENFAITS D’UN MASSAGE RELAXANT AROMATIQUE');
                    }

                    $scope.success = function () {
                        setNotification(notifications, 'success', 'Success ', 'Success isn’t the matter of being the best');
                    }

                    $scope.warning = function () {
                        setNotification(notifications, 'warning', 'Warning ', 'If I have received a suspicious message, what should I do?');
                    }

                    $scope.error = function () {
                        setNotification(notifications, 'danger', 'Error ', 'No I don’t keep secrets from mom and dad.');
                    }
                });

                function setNotification(notifications, type, title, body) {
                    notifications.add({
                        type: type,
                        title: title,
                        body: body
                    });
                }
            })();
        </script>
    </head>
    <body ng-app="notifyApp">
        <div ng-controller="notifyController">
            <input type="button" ng-click="info()" value="info" style="color: #FFFFFF;background-color: #8CB91B; width: 80px;" />
            <input type="button" ng-click="success()" value="success" style="color: #FFFFFF;background-color: #8CB91B; width: 80px;" />
            <input type="button" ng-click="warning()" value="warning" style="color: #FFFFFF;background-color: #8CB91B; width: 80px;"/>
            <input type="button" ng-click="error()" value="error" style="color: #FFFFFF;background-color: #8CB91B; width: 80px;"/>

            <div>
                <div class="alerts" ng-shw="notify.queue.length > 0">
                    <div class="alert alert-{{(m.type)||'info'}} alert-dismissable fade in pull-right" ng-repeat="m in notify.queue">
                        <button type="button" class="close" ng-click="closeAlert(m.body)" data-dismiss="alert">×</button>
                        <label>{{m.title}}</label>
                        <div>{{m.body}}</div>
                    </div>
                    <br />
                </div>
            </div>

        </div>
    </body>
    </html>

     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!