How to use Bootstrap Sticky Notifications AngularJS Service.

shawn jasper 03 Jun 2018
Post is removed by the Admin.
Anonymous User 02 Jun 2018
you can also use the following link:
https://www.jqueryscript.net/other/Simple-Multipurpose-Growl-Notification-Plugin-With-jQuery-notifier.html
Anonymous User 29 Feb 2016
@{
    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>
forum

How to use Bootstrap Sticky Notifications AngularJS Service.

Can you answer this question?

3 Answers
