forum

Home / DeveloperSection / Forums / How to use Bootstrap Sticky Notifications AngularJS Service.

Ask Question

How to use Bootstrap Sticky Notifications AngularJS Service.

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

Anonymous User

Follow
I am a content writter !

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>
answer 415872902103914

 

Liked By