Home > DeveloperSection > Forums > How to use Bootstrap Sticky Notifications AngularJS Service.
Ankit Singh

Total Post:341

Points:2389
Posted on    February-29-2016 10:37 PM

 Angular JS Angular JS 
Ratings:


 1 Reply(s)
 366  View(s)
Rate this:
How to use Bootstrap Sticky Notifications AngularJS Service. please help me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    February-29-2016 10:39 PM

@{
    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>

 


Don't want to miss updates? Please click the below button!

Follow MindStick