Comments (10)
I have added a note to the README file with a link to this thread in case someone needs this behavior. No one else has requested this feature before or since, so I'm going to leave it out of the core library for now.
If anyone feels it should be added in, please add a comment to this thread.
@tyriker—Thank you for your input and feedback!
from angular-growl-notifications.
@mufsir — Just to make sure I understand correctly:
- you are using ui-router (because you mention a state change)
- you are triggering a notification
- clicking the close link in the notification still works here
- then the state changes while the notification is still visible
- clicking the close link in the notification does no longer work
- the notification disappears after timeout
Is that correct? Thanks!
from angular-growl-notifications.
@jvandemo : Yes!
from angular-growl-notifications.
@mufsir — Do you by any chance have a plunk for your scenario? If not, would you be interested in creating one? Thanks!
from angular-growl-notifications.
https://plnkr.co/edit/2uPR4AFwJ90idMxMhYRY?p=preview
Go to Route 2, a couple growls will show. Go to Route 1 and they are no longer dismissible.
The TTL is 60 seconds. They'll disappear after the TTL.
from angular-growl-notifications.
The controller $growlNotification
may have to move up to the growl-notifications directive? Then there'd have to be some communication between the 2 when adding a new growl...
The problem ultimately looks like the controller goes away when you change to a different state. At least when you change states at the same level (sibling or higher). I'd guess a nested state change would continue to work.
from angular-growl-notifications.
Okay—I see it.
UI-router destroys the scope (which exposes the controller) when leaving the state and thus the click handler is not executed as expected.
I think it should be possible to create a directive e.g. close-growl-on-click
to close the notification when the scope is already destroyed so we can:
<growl-notification>
<button close-growl-on-click>Close me</button>
</growl-notification>
I will experiment with demo code to see if we can make this happen.
Thanks for reporting! 👍
from angular-growl-notifications.
I have a working directive right here:
https://plnkr.co/edit/4j9pivI7bBuCVy8QQ2zK?p=preview
from angular-growl-notifications.
This worked for the Plunker, but not in practice. There were 2 issues I faced and resolved.
First, the directive was only removing itself from the DOM, not the entire <growl-notification>
element. But, easy fix... just call growlNotificationController.remove()
instead and let it do its thing.
Second, since the event handler was running "outside" of Angular, the removal wasn't happening until the next $digest
cycle happened. FIxed by wrapping the growlNotificaitonController.remove
call in $scope.$apply(...)
. I don't know how/why it works in the Plunker.
Here's the code I ended up with:
.directive('growlCloseButton', function () {
return {
require: '^^growlNotification',
restrict: 'E',
link: function ($scope, element, attributes, growlNotificationController) {
var handler = function () {
$scope.$apply(growlNotificationController.remove());
};
element.on('click', handler);
$scope.$on('$destroy', function () {
if (growlNotificationController.timer && growlNotificationController.timer.then) {
growlNotificationController.timer.then(function () {
element.off('click', handler);
});
}
});
},
template: '<button type="button" class="close pull-right"><span>x</span></button>'
};
});
Awesome work BTW!
from angular-growl-notifications.
@tyriker — Awesome, thank you, great feedback!
I will run some additional tests to make sure everything works as expected before adding the directive to the core library.
Thanks again — great work!
from angular-growl-notifications.
Related Issues (20)
- Cannot read property 'parent' of undefined HOT 3
- Publish on NPM HOT 1
- Render same notification multiple times HOT 1
- Shows first time, then nomore HOT 4
- Angular expressions in strings (interpolation) HOT 1
- Custom css for each notification
- Dynamically adding notifications example grows indefinitely HOT 5
- Error: after is undefined HOT 3
- growl notification ttl is not getting applied HOT 7
- on-close not working HOT 2
- how do i instal it on windows and without using bower? HOT 1
- Inline HTML HOT 5
- (Proposal) Replace $timeout with $interval (Accommodate Protractor tests) HOT 4
- Cannot read property 'parent' of undefined HOT 3
- on-close function gets called immediately HOT 3
- unable to download 2.6.0 version HOT 1
- on-open, on-close not in complete documentation
- class="ng-scope" error in dev console HOT 1
- Error: after is undefined HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-growl-notifications.