alexcrack/angular-ui-notification

Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating

angular-ui-notification's Issues

Support for ui-router

Would be great if we could redirect via ui-router as well. Great module!

Notification.success({message: '<a ui-sref="my.route({url: urlParam})">click here to change ui-route</a>'});

CSS prevents from moving notification to bottom

First thank you for sharing your work. I really appreciate your coding. It is clean and easy to understand.

Bug/Feature: In your CSS you force "top" definition to '-100px' which prevents moving notification to bottom of the page. Moving to bottom while not available in config option is easy. You only have to replace "top" by "bottom" in line 58 of your script

element.css('bottom', top + 'px');
element.css('right', right + 'px');

Note: I do not use LESS but SCSS, I placed https://gist.github.com/fulup-bzh/d3fe7a5e537bc5a46e3d a SCSS version of your LESS file. It is exactly the same expect that I remove dependencies to BootStrap [I'm using F5].

Request: would be nice to have an option to place notification at bottom of the page without hacking your javascript.

NPM package?

Hi,

first of all, thanks for the nice package. It is exactly what I was looking for. Would it be possible to also provide this as an npm package? I am not using bower right now and it would be convenient to have this on the global npm registry as well. Meanwhile I have pushed it to a private npm repo which works for now.

Tobias.

startRight on call

It seems that the option startRight is ignored when used as so:

Notification.success({message : "txt", startRight: 100});

According to the doc:
"Options can be passed to configuration provider globally or used in the current message."

i don't know if it's a bug or documentation error, i let you see :)

delay until $http ajax success resived ?

hello

do this ui notification suport delay until ajax completed?

Feature request: fully styleable notification box

We use the component to display real time information notifications that don't really act as warning/info/error/... pop-ups. We had to change the CSS a bit to get the right colors and styling of the overall component, since we could not use the predefined icons and wanted to put some font awesome icons insted. An option to provide a custom template for the whole notification box would be great!

Config error

I am trying to do global configuration and running into errors. Here is a forked plunker.

http://plnkr.co/edit/HRTVD29hJVr74E1OFlma?p=preview

Am I doing something wrong?

Access to internal list of messages

Sometimes is nice to check first if the message you want to display was already added and is still active, to avoid duplicated messages. Either access to the array of active messages or a new option to accomplish so would be appreciated.

Thanks!

Notification.primary is not working

Using the min.js file and calling simply Notification.primary('Primary notification'); as shown in the example, but it gives following error.

 ReferenceError: args is not defined
    at Function.m.primary (http://localhost:9000/bower_components/angular-ui-notification/dist/angular-ui-notification.min.js:8:1568)
    at new <anonymous> (http://localhost:9000/app/home/home.controller.js:6:16)
    at invoke (http://localhost:9000/bower_components/angular/angular.js:4182:17)
    at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4190:27)
    at http://localhost:9000/bower_components/angular/angular.js:8449:28
    at http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:3897:28
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8213:9)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7722:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7075:13)
    at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:6954:30) 

All other functions works just well.
I installed it from bower. The version I got is v0.0.2.

Most probably the problem is missing args as argument in primary function. Here is the current definition:

notify.primary = function() {
   this(args, '');
};

It should have args as argument to the function. That might solve the problem. When I tried to do that it hanged my whole application saying "232VM1570:26054 WARNING: Tried to load angular more than once." and it goes infinitely loading process.

Use notification in HttpInterceptor

Hi,

I'd like to use Notification in my interceptor. It's seams that i can't because there is circular dependency problem:

$http <- Notification <- errorHttpInterceptor <- $http <- $templateRequest <- $compile

This is how i'm registering interceptor:

angular.module('myModule', [])
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('errorHttpInterceptor');
  });

angular
  .module('myModule')
  .factory('errorHttpInterceptor', function (Notification) {

    return {
      'responseError': handleErrorResponse
    };

    function handleErrorResponse(response) {
        Notification.error('error');
    }

Do you have any ideas?

disable close feature

I don't want the notifications to disappear when the user clicks on it.
Would it be possible to put this in options ?

Option to show "Close" button

Please, implement option to show "Close" button.
Thanks.

Notification.clearAll() not working on IE11

Hi Alex, great library. Unfortunately the Notification.clearAll() function is not working in IE 11.

it think this is becuase you are using element.remove() which is a helper method that is a part of DOM 4 and not supported in IE11.

You can easily resolve this by changing your element.remove to be:
element.parentNode.removeChild(element)

This is just what the DOm 4 helper does. I think this is hopefully an easy 'fix' that will make your great library more cross browser compatible.

thanks,
Albert

position parameters not working

Here is a forked plunker with the issue.

http://plnkr.co/edit/OtaIim7rhuvCpd1ypITB?p=preview

option 'type' don't work.

I'm trying to fire notifications with the parameter: type
like this:
var messages = [];
messages.push({type:'error',content:'Error notification'});
messages.push({type:'info',content:'Info notification'});
messages.push({type:'primary',content:'Primary notification'});
messages.push({type:'success',content:'Success notification'});

angular.forEach(messages,function(message,key){
Notification({title:'test',type:message.type,message:message.content});
});

thanks

thank you

unable to define individual position

Plunkr demo here: http://plnkr.co/edit/VFcfYRe8jY53Mkup6UeK?p=preview

the issue is my inability to dynamically define where the notification will appear. Passing in different numbers for the "startTop" and "startRight" parameters do not affect where the notification appears (as seen in the plunkr example. In my application I need to make the notification appear in different places (to correspond with specific elements) but can not define the position through these (startTop, startRight) parameters. Simply using "positionX: 'center'" is not specific enough of a position.

No custom template in version 0.0.12

Hello

First of all, I want to tell you I'm appreciate for your job this plugin works like a charm :)

Actually it worked like a charm until new release. Since 0.0.12 my custom templates aren't loaded. Everything works fine on 0.0.11.

Here is my code for debug purpose (template and call to notification):

<div class="ui-notification" custom-template>
    <h3>{{ msgTitle }}</h3>
    <div class="message">
        {{ msgBody }}<br>
        <a data-ng-show="someValue" href="a_link">Show Details</a>
        <a data-ng-show="!someValue" href="a_link">Show Details</a>
    </div>
</div>

var scope = $rootScope.$new(false);
scope.msgTitle = msg.notification.title;
scope.msgBody = msg.notification.body;
Notification.success({
    delay: 5000,
    template: "views/app/common/notification/template.html",
    scope: scope,
    replaceMessage: true
});

On iOS, positionX: 'center' doesn't work correctly.

The notification starts all the way left and transitions to the correct final center position rather than starting there.

Handle dupplicates

Hello! I would like to add an option to display a notification only if its not already displayed. Would you like me to write this?

Feature request: allow config per notification type

Our use case is that we would like to have notifications with a delay for success and sticky notifications for errors. More people could be interested.

What do you think about adding a "per notification type" config?

feature request. Center notifications

Could we have notifications optionally centered at the top or bottom of the screen (as opposed to the existing left, and right options). Also, could the text within the notification be centered by default. Basically looking something like google apps notification that show up at the top center.

Thanks for the really useful module!

Is there a way to get the position properties from the css for responsive design?

I have edited the css for the notications to fit into my page design, but I can't quite figure out how to get the javascript to play nicely with my media queries for my responsive design. I need the start position to be at top 70px on desktop and 80px on mobile. I can do this easily with CSS, but the js only has one start position to play with.

Also, I don't suppose there's an easy way to have it do something more like a jQuery slideDown rather than moving in from the top of the screen, is there? I'ds like to have it appear to slide out from under my top header. (wishful thinking :-) )

THANKS!

Feature request: click handler

Our use case calls for a notification item that can be clicked on and then would call a function in our code (to show more details about the item using ngDialog). I tried adding ng-click handlers in the template, but the code never got called. It would be great if we could pass in some arguments in some way of course!

Error: element.style is undefined

I get this error whenever I try to show a notification. For example running Notification.success('success');. Is anyone else having this problem? Have I missed some part of the config?

Error: element.style is undefined
.css@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:3074:7
JQLite.prototype[name]@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:3201:9
this.$get/notify/<@https://localhost:8443/ext/angular-ui-notification.js:115:17
$http/promise.success/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:9954:11
processQueue@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:14437:28
scheduleProcessQueue/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:14453:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:15702:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:15513:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:15807:13
done@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:10246:36
completeRequest@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:10418:7
requestLoaded@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.2/angular.js:10359:1

close a notification programmatically

hello
i have no-timeout notification but after one event i need to close this , please help me how i can remove programmatically

Feature Request : Add a max number of displayed notification

The idea i suggest is to have a new parameter on configuration who is the max number of notification displayed on the screen. We can imagine that when max number is reach, the oldest notifications are replaced with the new one.

Circular dependency in interceptors

I am having this exact same issue: #29

I tried the code and I did not have any success.

angular.module('ui', [])
    .config(function($httpProvider) {
        $httpProvider.interceptors.push('baseHttpInterceptor');
    })
   .factory('baseHttpInterceptor', function ($injector) {

       var Notification = $injector.get('Notification');

       return {
           'responseError': function() {
               Notification.error('Oops');
           }
       };
    });

Circular dependency error:

Circular dependency found: 
$compile <- Notification <- baseHttpInterceptor <- $http <- $templateRequest <- $compile

Any ideas?

Bootstrap Glyphicon

Are you planning add Glyphicons from Bootstrap?

Problems in instalation with Bower

I run:

bower install angular-ui-notification --save

And I get the following bower messages:

bower not-cached git://github.com/alexcrack/angular-ui-notification.git#*
bower resolve git://github.com/alexcrack/angular-ui-notification.git#*
bower download https://github.com/alexcrack/angular-ui-notification/archive/v0.0.14.tar.gz
bower extract angular-ui-notification#* archive.tar.gz
bower mismatch Version declared in the json (0.0.12) is different than the resolved one (0.0.14)
bower resolved git://github.com/alexcrack/angular-ui-notification.git#0.0.14
bower install angular-ui-notification#0.0.14
bower no-json No bower.json file to save to, use bower init to create one

And the dist folder is empty.

How to solve this problem?

The version of my Bower is 1.6.3.

Grateful.

Destroy associated scope when template element is removed

I might be missing something but it seems that the scope created for each notification (var scope = args.scope.$new();) is never destroyed.

Is there a way to properly cleanup the scope when the template element is removed ?

Use directives & controller in notification

Is there any way to provide a controller for the notification and use angular directives in the template?

Version mismatch

On Tag 0.0.14 version specified on bower.json is mismatched. It says 0.0.12 instead on 0.0.14. Because of this fact, this error is generated:

*** [err :: xxxx.com] bower angular-ui-notification#~0.0.14 mismatch Version declared in the json (0.0.12) is different than the resolved one (0.0.14)

custom template

Can you help me find out why custom template doesn't work ?

I am calling the service this way
Notification({message: 'Hello', delay: 10000, templateUrl: 'main/notification-template.html'})

My html file is in the templates folder.
A notification appears, but with the default template.

How to set custom template URL

Hey there,

By default the service looks for the notification template at '/angular-ui-notification.html'.

How do we go about setting this value in our app with a custom template URL?

Thanks,

Luke

return Notification object

I think would be nice if Notification could return a object with it's configuration, methods, etc..

I would like to kill a notification if a ajax request is done. To this date there's no way to do this.

The necessary modification (draft) is proposed at https://github.com/alexcrack/angular-ui-notification/compare/master...enapupe:returnNotification?expand=1

Do you think this improvement is possible?

An example of use would be:

var test = Notification("Refreshing.....");
SomeService.regenerateAPIKey().then(function(){
    Notification("API Key sucessfully regenerated.");
    test.then(function(notification){
        notification.kill(true);
    });
});

Use explicit dependency injection for the provider in the source file

The fact that explicit dependency injection is not used for the provider in the source file is causing problems when using browserify & ng-annotate, which is blocking.

It requires the provider to be created with:

this.$get = ['$timeout', '$http', '$compile', '$templateCache', '$rootScope', '$injector', '$sce', '$q', '$window',
        function($timeout, $http, $compile, $templateCache, $rootScope, $injector, $sce, $q, $window) {
              ...
        }
]

It is done in your minified file but the source file is used with browserify.

Check notification type in custom template

Just wanted to know if there is a way to do this.

I would like the icons within my custom notifications to be different for error, warning and success types however I see no way of doing that other that passing in the icon html with the message or creating a new scope to pass in.

Is there a way to check the notification "type" inside a custom template?

Everything is working great, however, notifications aren't removed from the DOM once hidden

It took a while before I saw this, but, once my notifications are hidden (they even get the class 'killed', they stay in the dom.
Hovering with the mouse makes them visible again..

I saw in the demo (they are removed from the dom after a short while).
Tried to find the piece of code that removes them from the DOM, but can't find it.

Am I forgetting something?

Why it's still old version on bower?

I want to get the updated and patched version (merged by pull request)

How to use ui-notification in combination with an exception handler?

Hello,

I would like to use angular-ui-notification inside a exceptionHandler like here:
http://stackoverflow.com/a/16942964/3894981
Instead of alert(...) I would like to use Notification.error(...).
However this causes an error:
https://docs.angularjs.org/error/$injector/cdep?p0=$rootScope%20%3C-%20$timeout%20%3C-%20Notification%20%3C-%20$exceptionHandler%20%3C-%20$rootScope%20%3C-%20$translate
What is the workaround to use this extension to show error messages to the user?

Notification is fade out, but still will show up while mouse hover

Great job you had done. I really like it. I found out the notification will show and fade out, but while I move my mouse pointer around, these notifications will show up. And I need to click one after one to make these history notifications go away.

'Killed' elements remain in the DOM

I notice that when notifications fade out, they do that via the 'killed' class which sets their opacity to 0. But I don't see anything in the code which removes those elements from the DOM. I think invisible notifications will accumulate indefinitely, bloating the DOM. Seems like there should be a periodic mechanism to cull out these old elements, removing the from the DOM entirely.

Style is broken, when using positionY : 'bottom'

If I use position : 'bottom', the alert tries to fill the entire column.
The alert text is not shown at all.

Public

Would you public your last changes to bower, so using it i can download the version wich implements custom positioning of the notifications?

Dispatch an event 'onDismiss' when the notification closes or times out.

This would come handy for handling expiry of different notifications.

Can we put this on the bower registry?

No Delay is not working

For delay option description Readme says: Number of ms before notification fades out. If not an integer, notification will persist until killed. I tried setting it to non numerical value both, for a single message and in global options, but the message dissapears immediately. See plunker: http://plnkr.co/edit/4WKNdPOieAOzFJLQbOju?p=preview

Changing the position of notification

Is it possible to configure the postion of angular ui notifications?

Error during bower installation

Hi,
I tried to install using bower with the following command:
bower install angular-ui-notification --save

It looks like that your bower.json file in not valid anymore, i get the following error message:

Additional error details:
The "main" field cannot contain minified files

Regards
Tobias