forum

home / developersection / forums / how to use bootstrap sticky notifications angularjs service.

Ask Question

How to use Bootstrap Sticky Notifications AngularJS Service.

Anonymous User 2473 29-Feb-2016
How to use Bootstrap Sticky Notifications AngularJS Service. please help me.
angular js angular js 
Updated on 03-Jun-2018
Anonymous User

Other

I am a content writter !

Follow Message
Can you answer this question?
Answer

3 Answers

shawn jasper

shawn jasper

03-Jun-2018
Post is removed by the Admin.
Anonymous User

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

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>
How to use Bootstrap Sticky Notifications AngularJS Service.

 

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy