wmluke / angular-flash Goto Github PK

angular-flash needs a refresh. What features would you like to see in v2.0?

first of all luke, sweet component, i think flash messages are ubiquitous and you did a really nice job with the project in terms of design, function and documentation.

this kind of a nit, but i would prefer to see the entire message (bootstrap round edge border style, alert-header, alert-message) fade uniformly. right now, the styled border and alert-message just disappear and then only the alert-header fades per css transition:

.fade {
  opacity: 0;
  -webkit-transition: opacity 1.15s linear;
  transition: opacity 1.15s linear;
}

i'm admittedly a javascript beginner, but i'd be happy to take a look at a PR if you could give some hints where to start looking based on your working knowledge.

regards,
tony...

This is somewhat similar to issue 10.

One use case I have now: when alerting to issues when submitting a form there may be a number of issues wrong. For example, a field might be missing, another field could be too long, another might have unicode chars where none were allowed, etc. My backend service sends an array of messages of this type that I want to alert the user to. I could see overloading to allow an array for the message, or worst-case I could build html into the message using paragraph tags or an unordered list, but I need some equivalent functionality.

I'm hoping this angular-flash can be extended for this use, or guidance on how to meet my requirements some other way.

hi luke,

i have something like:

<div flash-alert active-class="in alert" class="fade">
    <strong class="alert-heading">Boo!</strong>
    <span class="alert-message">{{flash.message}}</span>
</div>

and i have a situation where i am sending one message there and then almost immediately after (before the first message fades), sending another message.

right now, i am only seeing the first message.

can you suggest any strategy to get the messages to show sequentially (so after the first one fades, the second one shows and then fades)?

or if that is a tall order, i'll take any suggestions, like even have them show simultaneously, etc.

i should add that in my particular case, one of the messages is a success, and one is an error,
so i wouldn't mind having one of each, but even when hidden they are taking up some space
and adding two creates a larger gap that i don't think the designers will appreciate.

regards,
tony.

Im probably doing something wrong, but either way i want to make sure this is documented.. I must be missing something in the examples..

Given the following code:

<div flash-alert="error" active-class="in alert alert-dismissable" duration="0">
    <button type="button" class="close" ng-click="hide()" aria-hidden="true">&times;</button>
    <strong>Error!</strong> {{flash.message}}
</div>
<div flash-alert="success" active-class="in alert alert-dismissable" duration="0">
    <button type="button" class="close" ng-click="hide()" aria-hidden="true">&times;</button>
    <strong>Success!</strong> {{flash.message}}
</div>

When the alerts are not triggered (hidden) their contents still show up.

There is a "1.0 - 1.2" value for angular dependency version which causes bower questions when upgrading angular to 1.3.

The alert still takes up space on the page when it is hidden:

http://plnkr.co/edit/3FaOT5DwdiHywFoA2tvL

Is there a way to collapse the space?

Hi!

A quick search for IE's Object.defineProperty polyfill gives me nothing (i.e. there is no good polyfill).
So, I've created fork with fixes for IE. Fixes are trivial - all setters are replaced by function calls.
I know that this is breaking changes, is there any chance that this fix will be accepted by you?

When we register 2 flash messages after each other only one flash message will be flashed on screen. Also we would like to use the directive to show the messages of all types, but if we do this we have the same issue if a warning and an error flash message are registered. It will only show the last one.

Hi!

I've noticed that flashAlert directive uses $timeout to auto-hide alert.
But this cause protractor tests to fail, e.g. when I want to test whether flash is shown, because while the flash is shown protractor can't synchronize with the page waiting for all timeouts to complete.
See protractor's FAQ for details.

So, I propose to use $interval service to support protractor, but this service available only since angular 1.2.0-rc.3.
What do you think about this?

As described. Sorry for flooding your issues list!

right now you need to have npm, bower and grunt installed on your system.

It'd be nice if you had bower and grunt-cli as dev dependencies in package.json and then used the programs out of node_modules rather than depending on them being installed.

This works, but as soon as the flash code is inside the menu.html, it doesn't display anymore. It's a scope issue but I haven't quite wrapped my head around it yet.

      <body ng-app="client">
          <div flash-alert active-class="in" class="alert fade offset2 span9">
            <span class="alert-message">{{flash.message}}</span>
          </div>
          <div class='app' ng-controller="AppCtrl">
            <div id="menu" ng-include="'views/menu.html'"></div>
            <div class="container">
              <div class="row">
                <div ng-show="showSystem()" ng-cloak class="span2">
                  <div id="system" ng-include="'views/system.html'"></div>
                </div>
                <div class="span10">
                  <div class="app" ng-view=""></div>
                </div>
              </div>
            </div>

Hello I want to know if there is any simple way to make one flash message appear longer than the others. All messages will display for 5s and one will display longer for example 10s. Thanks.

hi, first of all thanks for this plugin ... we where using it in our project and it was working really well. But now we found a few issues with it. We have a page which shows flash messages, on this page we can open a modal which also needs to show flash messages. Now when we get a flash it is shown on our page and if we open the modal after that, our flash is shown again in the modal. This is because the clean is only called when the directive has been destroyed. I think there has to be some way of popping the error message from the flash service so that it is only shown once.

Maybe this isn't something in the scope of this project ... but just wanted to let you know.

kind regards,
Daan

AngularJS's new animating support is outstanding...angular-flash should leverage it.

http://docs.angularjs.org/api/ngAnimate

Imagine this example:

flash.info = 'Saving...';
object.save(function(){ flash.success = "Object saved"; });

It correctly replaces the message with 'Object saved', but it does not remove the original 'alert-info' class so it shows 'Object saved' with two classes: 'alert-info' and 'alert-success'.

using this template:

<div flash-alert class="alert">
  <span class="alert-message">{{flash.message}}</span>
</div>

If you are ok with me fixing it I could make a PR. Lets just figure out some solution you would be happy with.

Hey, great little service! I did notice that the message continues to take up space in the dom after it is 'closed'. This seems to be because inside the directive you are leaving the message object on the scope instead of clearing it out.

If you add $scope.flash = {} to the flash-directive on line 26 it'll fix it.

            $scope.hide = function () {
                removeAlertClasses();
                if (!isBlank(attr.activeClass)) {
                    element.removeClass(attr.activeClass);
                }
                $scope.flash = {};
            };

Currently, the flash service only knows global flashes, and directives can only discriminate according to the type of alert. It would be nice if the alerts could be restricted to scope. It's strange that I define an alert message in scope A, but it will not only show in scope A, but also in scope B! for example, you have a modal open and something fails, you want to show a flash, but you also want to globally show a flash with a more generic error. currently, the modal message would be displayed globally, and the message would be out of context.
Not sure about the best way, though. Maybe when creating the directive you pass an identifier to the service, and the service keeps track of all currently active flash-ids?
However, that would mean that the message definition must be per-id, not global as of now.

our project ran into some timing issues getting consistent passing protractor tests against (auto-fade) flash messages, so we decided to get rid of these tests for now.

wondering what strategies, if any, others have tried successfully around this?

regards,
tony.

Hi guys,

I don't know if its possible with this flash service, but I try to do the following:

1. I want a ng-switch on the attribute "flash.type" if there is something like this.
2. If flash.type is error, then a div block should be display, if its success, then another part should be displayed.
3. The main problem I have is, that I have a big block on the top of my site for the flash messages and they are not visible but it takes some space and it looks horrible.

Is there a way to get a solution for this problem ? Maybe there is also a way to do this, but I didn't find from the documentation.

Regards

I am giving this util a try and all seems to be working except the actual message text does not show up. Perhaps flash.message is not being added to the scope as it seems? I am trying with angular 1.0.7.

Also I notice you have some version of this in angular-common, but it appears this is the more recent version. Is that correct?

Thanks! This looks like it should be helpful and clean for dealing with messages.

https://github.com/wmluke/angular-flash/tree/master/app

what's the ../bower_components?
I can't find this file, so my project using angular-flash can't build.

Running "copy:dist" (copy) task
Warning: Unable to read "app/components/angular-flash/app/components" file (Error code: ENOENT). Used --force, continuing.

In bower, this library needs angular as a dependency.
The versions are restricted to "1.0 - 1.3".
This means I can not install this lib easily when other libs need angular 1.4 or higher.

Is there any reason it only works with angular 1.3?
If not, I suggest removing the upper limit.

I have something like this:

<div id="{{ 'alert-disklatency-error-' + id }}" flash-alert="error" active-class="in alert" class="fade">
    <strong class="alert-heading">Error!</strong>
    <span class="alert-message">{{flash.message}}</span>
</div>

Where the div id is being generated dynamically. The id variable is coming from a directive. Inspecting the element once the page is loaded, the element id is resolved correctly.

If I try this:

flash.to("alert-disklatency-error-" + String(id)).error = 'error!';

Nothing is displayed. Again, the id is being resolved correctly, and if I remove the id from the equation, the alert is displayed correctly.
Unfortunately, I need dynamically generated Ids, since I'll have objects being created dynamically.

Any ideas?

http://getbootstrap.com/components/#alerts-links

Could be helpful to allow html-safe messages. ng-bind works in the directive, but ng-bind-html shows no message.

Thanks

Can someone provide an example of the subscribe method? I want to set my flash div to display:none after it flashes to remove it.

Error: Cannot find module '/Users/apple/Downloads/angular-flash-master/app'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3

How do I handle the case if there is a flash directive on the from page and on the page the form redirects to. I don't get the correct behaviour. Perhaps you can help me understand it.

My use case is the following. In my success callback I do the following

function success() {
    flash.success = 'Success';
    $location.path('/new-path');
}

Then the flash on my current page is notified, but because of the redirect, the $destroy event is called and the flash message is cleared. Thus the flash on the target page is empty.
The other variant I tried is to have the flash directive in the $rootScope, in this case the $destroy event is never called, but the flash is also not cleared while moving between pages.

I would like to use flash.success and flash.error and display the flash on the next (target) page, but only on this page and not the following pages. How can I do that?

I have the following HTML:

<div flash-alert="success" active-class="in alert" class="fade">
  <strong class="alert-heading">Hurra!</strong>
  <span class="alert-message">{{flash.message}}</span>
</div>

When the alert is removed it doesn't fade out as expected, instead it just disappears. Any way to fix this?

I found myself wanting to perhaps show some messages longer than others.

Wouldn't it be nice to be able to specify how long you want the message visible? And if you want it to automatically disappear.

When I have flash messages in consecutive views, flash message on second page is not shown. Please check the below code. flash to strategy also is not working(
flash.to('alert-1').info = 'Only for alert 1';) It seems like page 1 swallowing flash message destined to page 2.

Page 1

Page 1 controller
flash.success = 'Deletion was successful.';

Page 2

An errant keystroke created this issue. Unfortunately, Github doesn't allow you to delete an issue.

Great plugin-in btw. It's been very useful in a project I'm working on.

@wmluke - label as you see fit.

Could you add a snippet showing how to load the module js?

script src="bower_components/angular-flash/dist/angular-flash.min.js">

Hi,

Does this plugin support displaying multiple flash messages of the same type. For instance, I want to display 3 messages of the type 'info'.

Thanks and regards,
./Sahan

Apologies, I couldn't reopen the other issue (#11) for some reason:

Looks like the culprit is this:

 $scope.$on('$destroy', function () {
   flash.clean();
});

When you have multiple flashes, the destruction of any one of their scopes causes all flashes to be unsubscribed, I think...

Adding an id attribute to the flash-alert div tag causes flash to not show. For example, the following will not work:

<!-- Set the display duration in milli-secs.  Default is 5000, 0 disables the fade-away. -->
<div flash-alert id="alerts" active-class="in" class="alert fade" duration="0">
    <!-- Manually hide the alert with `hide()` -->
    <button type="button" class="close" ng-click="hide()">&times;</button>
    <strong class="alert-heading">Boo!</strong>
    <span class="alert-message">{{flash.message}}</span>
</div>

Expected/desired behavior is that the id tag can be added without causing any change in behavior. I've tried it both near the beginning of the attributes as shown above and at the end.

Binding to element ID is not working.

<div flash-alert="info" id="flash1" class="alert">
      <span class="alert-message">{{flash.message}}</span>
</div>

flash.info = 'Some info for any element ...';
flash.to("flash1").info = 'This is info only for "flash1"';

would display "Some info for any element ...".