I am trying to get ng-notifications-bar to work with browserify-shim, but am unable to. I am requiring it in my app:

require('angular').module('admin', [
  require('angular-loading-bar'),
  require('angular-ui-router'),
  require('angular-ui-bootstrap'),
  require('bootstrap-ui-datetime-picker'),
  require('angular-bootstrap-show-errors'),
  require('angular-cookies'),
  require('angular-breadcrumb'),
  require('angular-resource'),
  require('angular-sanitize'),
  require('ui-select'),
  require('ngmap'),
  require('ng-notifications-bar'),
  require('textAngular')
])

And it is also included in my package.json file as a dependency and within browser, browserify-shim.

  "browser": {
    "angular": "./node_modules/angular/angular.js",
    "ng-notifications-bar": "./node_modules/ng-notifications-bar/src/ngNotificationsBar.js"
  },
  "browserify-shim": {
    "angular": {
      "exports": "angular"
    },
    "ng-notifications-bar": {
      "depends": [
        "./node_modules/angular/angular.js:angular"
      ],
      "exports": "angular.module('ngNotificationsBar').name"
    }

Any thoughts on getting this working?

Use $cookieStore to save prevent notifications a user has already dismissed / closed

• This has a config spot in the provider (getSaveResponse, setSaveResponse)
• Add a provider config option for the cookies prefix value
• validate that a notification with saveResponse also has a id parameter. This was needed to find * correspond correct notifications for dismissal.

Decouple glyphicons. Fairly straight forward. I was using font awesome and needed to change the template because of this. The close icon doesn't need to be library specific. Maybe add a way to customize it?

Sub-task of #15.

Hey there, first of all, great component ! thanks for the hard work.

I'd like to propose one enhancement: the ability to remove existing notifications before adding a new one.
Basically the component would only allow one notification at the time. Right now I can add several notifications and they stack on top of each other.
The way we could do it is restrict the number of notifications visible in the same time. If the number goes over the limit, the oldest notification would be removed, until reaching the limit again.

I'm thinking about adding one setting option: maxVisibleNotifications
This could be a parameter in the provider:

app.config(['notificationsConfigProvider', function (notificationsConfigProvider) {
    // max visible notifications
    notificationsConfigProvider.setMaxVisibleNotifications(1);
}]);

I'm currently too busy to take care of it & pull a request, but I will once I can. I just wanted to throw the idea out there.

Thanks

Hi, i have problem with adding directive in message content. We may add compile to directive notificationsBar.

Thanks alot.

Got an error when using this with requireJS

Fixed it as follows, not sure if this is the best way to go about it however:

angular = angular | window.angular

Bower downloads a version from last may (300eaa1). Tag not updated - that's the newest tag -> depends on an old angular version.

Before continuing before I want to say this was far and away the best notification module I found during my research. Given that I needed to modify it quite substantially I wanted to also praise the code quality because it took barely any time to grasp everything.

Unfortunately, I did run into issues and I would like to share my cases for possible enhancements to the main code base.

• Use $cookieStore to save prevent notifications a user has already dismissed / closed
  • This has a config spot in the provider (getSaveResponse, setSaveResponse)
  • Add a provider config option for the cookies prefix value
  • validate that a notification with saveResponse also has a id parameter. This was needed to find correspond correct notifications for dismissal.
• Give the ability to modify the template or provide a custom one through either transclude or template-url attribute.
• Decouple glyphicons. Fairly straight forward. I was using font awesome and needed to change the template because of this. The close icon doesn't need to be library specific. Maybe add a way to customize it?
• Add a notification class to each notification div in the template along with the note.type.
  • This is a minor one because I just wanted to use a selector like .notification to target each entire notification. I could have used a child selector, but it just seemed like overkill for a html element that was a notification.

Let me know what your thoughts are. The template things are fairly opinionated for myself, but I do believe they are all good features.

How to limit the number of occurrence of the notifications? There is a feature already to implement this or should I treat this in my Controller for example?

When I show more than one notification, sometimes some of them stay forever even if hide : true. I know it might be little information but please try to reproduce. Thanks.

Hi!
I think you have a typo in Services section in README file.
The name of component's factory is notificationS, but in your example the name is notification
app.controllers('app', function ($scope, api, notification) {

And getting an error:

Error: [$injector:unpr] Unknown provider: notificationProvider <- notification

Give the ability to modify the template or provide a custom one through either transclude or template-url attribute.

Sub-task of #15

Could you please use some versions in the file description or maybe tags for repository? It would be much easier to track when it needs some updates :)

I have a small fix to make a pull request, but I suspect there are some steps to "compile" the library or something.

Could you post a small guide on how to do this?

thanks.

As follow for #16

Hi,

I love this notifications so much.

I've a little idea for your next improvement.

Make a config for show the notification at the bottom. Sometimes bottom is look better than top :p.

Thanks!

Add a notification class to each notification div in the template along with the note.type.
This is a minor one because I just wanted to use a selector like .notification to target each entire notification. I could have used a child selector, but it just seemed like overkill for a html element that was a notification.

Sub-task of #15

Hi, I've ben trying to setup the notification var for a couple of hours, i get a
👍 Error: $injector:modulerr Module Error whenever i refresh the page.

imports:

<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script scr="bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.js"></script>

var module = angular.module('app', ['onsen', 'ngResource', 'ngCordova', 'lbServices', 'vxWamp', 'LocalForageModule', 'angucomplete-alt', 'ngSanitize','ngNotificationsBar']);

When I uglify my bower dependencies, I'm getting this error from the notificationsBar.

glyphicons-halflings-regular.woof - glyphicons-halflings-regular.woff

Hey man, great project! Tried installing using the command in the README no luck, also tried to look it up on Bower and could not find it!

I'm doing:
notificationsConfigProvider.setAutoHideAnimation('fadeOutNotifications');
notificationsConfigProvider.setAutoHideAnimationDelay(15 * 1000);
But I don;t see any animations at hide time when I'm running the example.

Also is there a way to specify own HTML for message? When notificationsConfigProvider.setAcceptHTML(true), can I put in any HTML or it has limited capabilities.

Can you modify the angular dependency version to support version 1.3.x? Thanks

I have installed ng-notifications-bar and successfully created a notification, and was able to style the notifications, but now the message is separated from the notification. Two bars appear. One is white and one is the color of the notification. The white bar contains the message and the colored bar is beneath it. Here is my installation.

Package.json

  "browser": {
    "angular": "./node_modules/angular/angular.js",
    "angular-breadcrumb": "./node_modules/angular-breadcrumb/release/angular-breadcrumb.js",
    "bootstrap-ui-datetime-picker": "./node_modules/bootstrap-ui-datetime-picker/dist/datetime-picker.js",
    "angular-bootstrap-show-errors": "./node_modules/angular-bootstrap-show-errors/src/showErrors.js",
    "ng-notifications-bar": "./node_modules/ng-notifications-bar/src/ngNotificationsBar.js"
  },
  "browserify-shim": {
    "angular": {
      "exports": "angular"
    },
    "angular-breadcrumb": {
      "depends": [
        "./node_modules/angular/angular.js:angular"
      ],
      "exports": "angular.module('ncy-angular-breadcrumb').name"
    },
    "bootstrap-ui-datetime-picker": {
      "depends": [
        "./node_modules/angular/angular.js:angular"
      ],
      "exports": "angular.module('ui.bootstrap.datetimepicker').name"
    },
    "angular-bootstrap-show-errors": {
      "depends": [
        "./node_modules/angular/angular.js:angular"
      ],
      "exports": "angular.module('ui.bootstrap.showErrors').name"
    },
    "ng-notifications-bar": {
      "depends": [
        "./node_modules/angular/angular.js:angular"
      ],
      "exports": "angular.module('ngNotificationsBar').name"
    }
  },

I have required ng-notifications-bar in my app:

require('angular').module('admin', [
  require('angular-loading-bar'),
  require('angular-ui-router'),
  require('angular-ui-bootstrap'),
  require('bootstrap-ui-datetime-picker'),
  require('angular-bootstrap-show-errors'),
  require('angular-cookies'),
  require('angular-breadcrumb'),
  require('angular-resource'),
  require('angular-sanitize'),
  require('ui-select'),
  require('ngmap'),
  require('ng-notifications-bar'),
  require('textAngular')
])

I imported the styling using:
@import (less) "/node_modules/ng-notifications-bar/css/ngNotificationsBar.css";

Do you know why this would happen? Here is an image of what it looks like:

Hi,

Is there a way to add custom color/ class to the various notification options?

notifications.showError({
    message: 'Oops! Something bad just happened! (hides faster)',
    hideDelay: 1500, //ms
    hide: true //bool
    class: "custom-class" // With this, i could give different color schemes.
});

p.s: I love the color scheme, but this would standout way too much in my current application and hence i would love to have a feature where the class could be altered so that it can be tonned down a bit.

Cheers.
Roy

As an enhancement, it would be nice to see the notification fade out before being removed from the notification array. Maybe we want to apply a notification-exit animation. And once it finishes, remove it from the notification list.

Hi and congratulations for this nice directive. Great job.

I would like to show a notification bar whitout any animation. Is there an easy way to do it? I was reading the docs and as far as I know there isn't, but parhaps I'm wrong.

Thanks.

Note that the closing square bracket ] appears twice below (first appearance should be removed):

app.config(['notificationsConfigProvider'], function (notificationsConfigProvider) {
    // auto hide
    notificationsConfigProvider.setAutoHide(true)

    // delay before hide
    notificationsConfigProvider.setHideDelay(3000)
}])

Use all dependencies from npm.

Hello, thank you for this library.
Is it possible to 'cycle' messages instead of stacking them? In other words, I want to supply it an array of, say, 3 elements and have it cycle through them inside the same display bar.

thank you.

Hi

Any plan on tagging a new release to make autoHideAnimation & autoHideAnimationDelay available over bower?

Thank you
--jonas

The close icon font-size is 12px and the notification text is 18px. By default, it looks very disproportionate side-by-side (as seen when using font awesome icons). If you simply change the .notifications .close-click style in ngNotificationsBar.css to font-size: inherit;, the icon would look more uniform and proportional to the notification text. I tried to submit a pull request for this but didn't have permissions apparently.

At the moment we have to pass hide option to message functions. Instead, it will be great to have setAutoHide through the directive config.