sachinchoolur/angular-flash

A simple lightweight flash message module for angularjs

angular-flash's Issues

Incomplete documentation

I was looking for the Flash.clear() but I couldn't find it in the documentation. To save time of other people it would be nice to add that to the documentation.

Error when used without stateparams

I tried to use this way:
app.controller('MerchantsCtrl', ['$scope', '$resource', '$location', '$routeParams','Flash', function($scope, $resource, $location,Flash){ Flash.create('success', "Not Working"); }]);

But it doesn't work but when I use stateparams, it works:
app.controller('MerchantsCtrl', ['$scope', '$resource', '$location', '$stateParams', 'Flash', function($scope, $resource, $location,$stateParams,Flash){ Flash.create('success', "Working"); }]);

I am not sure which of my dependency is causing error.

The error I get in first case is :
Flash.create is not a function

Implement Support for "scoped" messages.

Scenario: I have a tag on my main index template, but I am using bootstrap-ui modals for login and registration to my site. Within the templates for the login and registration modals, I also have tags.

Right now, there is currently no way to distinguish between the different "scopes" of the messages. As in, I would like to define where my messages should go within my angular app. Currently, when I add flash messages, they show up on the main page AND the modal, which is ugly in my opinion.

I worked on this for a while, and got a working version of angular-flash with "scoped" flash message support. Added new attribute to the directive: "flash-scope" that can be used to define when messages should be displayed within that tag. Preserves all original functionality through the 'default' scope.

Pull Request #33

Flash Message optional timeout is not working

<div flash-message="10000" ></div>

If we do this, the value that is picked up by the plugin is the default one of 5000. Reason being is the order of execution

This happens first
timeOut = $timeout(function() {
$this.dismiss();
}, $rootScope.flash.timeout);

This happens second
$rootScope.flash.timeout = parseInt(attrs.flashMessage, 10);

Fade out animation impossible as ng-hide is applied directly after closing

I'm trying to animate the fade out of the messages (fade in works good so far). However, there seems to be a slight glitch in the code that hides the messages instantly after pressing the close button (or after waiting for the timeout) by applying class="ng-hide" to the message container. This hides the message instantly which makes an animation impossible.

Angular defines the corresponding CSS as follows:

.ng-hide:not(.ng-hide-animate) {
    display: none !important;
}

So I guess all it takes to solve this is to apply class="ng-hide ng-hide-animate", wait for the animation to end and then remove ng-hide-animate.

sourceMappingUrl in not minified file breaks Rails 4

On the bottom of dist/angular-flash.js there is a
131 //# sourceMappingURL=angular-flash.js.map
sitting, which blows up my Rails app :)

This should probably go to dist/angular-flash.min.js so the mapping can be found when You are using the minimified version.

Update docs

Hey, great app.

Just wanted to let you know that the docs you have on the landing page are a little off. I think you need to have 'create' and not 'add'

//current
Flash.add('success', message, 'custom-class');

//fix
Flash.create('success', message, 'custom-class');

Add ability to call some code once the flash message is dismissed

Hi,

It would be good to add an ability to add a callback to be executed when flash message is dismissed (either by timeout or by user). Something like this:

<div flash-message="5000" flash-message-dismiss="doSomething()"/>

Cheers

PS. If I get a chance I will submit a pull request for this.

Can dismiss/clear support container?

like create:
Flash.create('success', 'Hooray!', 0, {container: 'flash-fixed'});
it's useful to name Flash by 'container'

can you enhance this tool to support 'container' in method of 'dismiss' or 'clear'?
because using name is much more easier than maintaining a list of id.

Thanks!

is multiple container allowed?

I would like to have 2 flash message containers on the same page, is that possible?

I modified the Example code and created them both, using the create function emits to all
How does work the 'name' property and the 'container' setting
<flash-message name='one' duration="5000"></flash-message> <flash-message name='two' duration="5000"></flash-message>
Flash.create('success', message, 0, {container: 'one'});

http://jsfiddle.net/uxeg4nze/30/

Duplication of last alert when dismissing an alert

When showing multiple alerts and adding animation, there is a very strange behavior when dismissing an alert. Somehow it completely removes the alert HTML that was dismissed but instead duplicates the last alert in the list.

Steps to reproduce:

• Add an animation to the alerts by using .alerts {transition: all 5000ms ease-out;}
• Add multiple alerts
• Dimiss the first alert

For example: Add the alerts info1 and info2. When dismissing info1 it is instantly removed from the HTML, but instead the DOM shows info2 and a duplicated info2.

Tested with angular 1.5.8 and angular-flash-alert 2.3.0.

This might be related to the fix of #21

Webpack imports css as ngFlash module instead of js

The only way I've been able to get this to work in webpack is to either go into your index.js and manually tell the require to use .js or to delete the css file.

Animation not working because of markup/css issue

.alert.ng-leave {
  opacity: 1;
  transition: opacity 1.5s ease-out;
}
.alert.ng-leave-active {
  opacity: 0;
}

This snippet from the README file cannot work, because the markup looks like this:

<div ng-repeat="flash in $root.flashes track by $index" class="[...ng-enter/ng-leave/etc...]">
    <div role="alert" class="alert alert-success alertIn alertOut">[...message...]</div>
</div>

So the inner div with the alert class will not get the ngAnimation classes.
Would possibly be good to add an "alert-container" class to the outer div.

How does duration work?

Maybe I'm missing something but can't seem to get duration to work.

Please check updated fiddle

Display flash-message on top of other elements

I want to display the flash messages on top of other elements. I mean I don't like that a flash message pushes down the other content.

I have tried to use z-index: 100000; but no changes in the output.

Flash Showing Multiple Messages

I am using the flash message on login screen, and when user click login multiple times with invalid creds, it forces the login to go down and down by showing multiple error messages. Is there a way so that the flash message updates or overwrite the previous message

Flash dismiss not close the message

Hi,

I have a form that show a message if the login fails, but the message are showing one under other, I tried to put the Flash.dismiss but the flash message is not closed when you click on the login button.

Regards.

Do not use generic name "app" for global variable

Following documentation and trying to use extension I got Identifier 'app' has already been declared error right at the beginning. This is because I'm already using app global variable for my application. You should either use some unique name or even better make use of IIFE to avoid polluting global namespace.

Can this be used with AngularJS 4.x

If so, are there any coding examples for Angular 4.x. The example give does not seem to fit the normal angular 4 use as far as I can tell. I am new to Angular, so it is very possible I missed something or don't completely understand angular-flash use.

New contributor, various proposals

Hi.

I just point out here that I begin to use this package (for CaliOpen), and I am very demanding and picky on my Js/CSS. So I will start to contribute to this package, with four goals:

• Allow to use its own flash template with custom datas
• Improve the way to configure the plugin
• Improve the package code readability (and clean the CSS, give it a namespace !)
• Maybe, make all the Bootstrap stuff independent (because some people don't use Bootstrap, or don't want to load useless Js)

I hope these contributions will be appreciated :)
Please give me a feedback about it before I start making PRs.

Nicolas

E034 BootLint error On Generated Markup

I'm getting an E034 error on the markup generated for my flash box.

https://github.com/twbs/bootlint/wiki/E034

Can I customise the message

I want to get rid off the "x" on the message, can I do it? I don't users to be able to close the message but instead, let it dismiss it self

Reference to flash elements

I really liked this module, but I'd like to see the following feature that is present in this other library:

https://github.com/wmluke/angular-flash

Following that module idea, you can specify some id to the flash-message directive, so then when you call Flash.create service you could set target id too.

ie:

Flash.create('success', message, 'custom-class', 'login-flash');

//Or better you could make last parameter as a config object
Flash.create('success', message, {
class: 'custom-class',
target: 'login-flash'
});

Current master version is not actual

Please update for this state
http://jsfiddle.net/sachin377/1azz4xya/

Demo page not working (blocked non-HTTPS content)

The demo page is not working: https://sachinchoolur.github.io/angular-flash/

As the page uses HTTPS, it blocks loading non-HTTPS content:

Blocked loading mixed active content "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css"
Blocked loading mixed active content "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"
Blocked loading mixed active content "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"
Blocked loading mixed active content "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
Blocked loading mixed active content "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"
Blocked loading mixed active content "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-animate.js"

I cant see a flash mesage when I created it inside a promise

I have a lot of promises that are calling to services, depending of the response I want to show a success or a error mesage.. and fot any reason thi does not work... any idea?
not working:
$scope.approveIt= function(id) {
guestService.UpdateAppointmentStatus([id], Enums.GuestStatus.APPROVED)
.then(function () {
var message = ' Well done! You successfully approved the appointment.';
Flash.create('success', message);
},function(error){
var message = ' Something wrong happened...'+error;
Flash.create('danger', message);
})
};

working:
$scope.successAlert = function () {
var message = ' Well done! You successfully read this important alert message.';
Flash.create('success', message,0);
}

explorer issue

angular-flash doesnt work on IE
try your self even, go to http://sachinchoolur.github.io/angular-flash/
and try to click on the X button to close the flash object.
the problem is in line 134 at angular-flash.js
function findIndexById(id) {
return $rootScope.flashes.findIndex((flash) => {
return flash.id === id;
});
object doesn't support method findIndex

Unknown provider when using minified version

When I use the minified version I get a Unpr error. The run function is missing the "$rootScope" annotaion in the dist files.

It is not possible to set an default onDismiss callback while using the directive

root:
https://github.com/sachinchoolur/angular-flash/blob/master/src/angular-flash.js#L63-L68

When the directives link-function is called, there are 2 options:

1. there is a callback on the scope and the default-config gets overridden (as should be expected)
2. there is no callback on the scope and the default-config still get's overridden since Flash.setOnDismiss is used there.

Error when angular-flash is configured with ui-router

Hello.

I'm using angular-flash to show messages and when I tried to clear all messages when state is changed successfully, I get this error:

angular.js:13424 Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.5.3/$rootScope/inprog?p0=%24apply
at angular.js:68
at beginPhase (angular.js:17383)
at Scope.$digest (angular.js:16821)
at Object.dataFactory.dismiss (angular-flash.js:113)
at Object.dataFactory.clear (angular-flash.js:129)
at message.service.js:42
....

In order to clarify the issue, here is the code in message.service.js line 42:

$rootScope.$on('$stateChangeSuccess', function() { Flash.clear(); });

I hope you can help me, thanks in advance.

Not possible use flash message by id

If there are a few Flash messages in the same page, all of them would be throw when we expect only one of them. Throw message by message id should be possible.

Chrome Error

I'm using "angular-flash-alert": "latest" and today with the last release I got this error:

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

let id = parseInt(attrs.closeFlash, 10);

I'm just reporting... I'll use the 1.1.1 version until this get fixed.

Use the same name across api, repo and package managers

I think we should use only one name across the API, this repo and the package managers (npm...).

For the moment, we have:

• angular-flash for github repo and filenames
• angular-flash-alert for npm, bower
• ngFlash for the angular module
• flashMessage for the main directive
• Flash for the service
• dataFactory (wtf?) inside the service

Karma testing?

Before I set up angular-flash, all my karma tests were passing but now they are failing. I know I need to mock the flash service but I can't seem to be able to do it, any help?

Really cool by the way, angular-flash made my project look a lot cooler!!

$rootScope.$digest() causing error when dismissing ($apply already in progress)

When I fire Flash.clear() I get a $apply already in progress error.

If I comment out $rootScope.$digest() the error goes away

Any thoughts?

All the flashes defined in HTML will be recreated on any specific flash call.

Hi,
I need a flash message FM-A at the top of the page on lets say action A, and I need another flash message FM-B somewhere on the middle of the page.
I have defined two flash messages with different flash names defined.
If I create FM-B, FM-A is also getting created irrespective of the names defined.

Could you please verify the issue ?

Creating flash messages over multiple screens

I have multiple Flash messages setup across different screens :
Ex. var message ="User Successfully Logged Out";
Flash.create('success', message,0);

Any message that is not dismissed by clicking on the close button or using Flash.dismiss() queues up and pops up whenever I just want to see the one created for the page I'm looking at. I tried to add a Flash dismiss() prior to every create but I get a digest already in progress error every so often.

Demo repeats first animation

On the demo page, when you click on one of the buttons for the first time, the animation gets repeated after the alert finishes it's first transition.

Flash errors in mdDialog

Hey all!

Flash messages work great on my main page view, but not in mdDialog views.

Any idea why?

Thanks!

EDIT:
( O, foolish old me from the before times...apologizes for offering nothing of value to help you help me :D )

Alert fails to hide because of error

Whenever the alert tries to hide it fails and gives this error:

TypeError: $this.dismiss is not a function
at angular-flash.js:75
at angular.js:16303
at completeOutstandingRequest (angular.js:4928)
at angular.js:5316
at e (raven.min.js:2)

It's something to do with "var $this = this;" not working when called in
"timeOut = $timeout(function() { $this.dismiss(); }, $rootScope.flash.timeout); "

It works fine when I use the functions code instead of calling "$this.dismiss();". Any idea what could be wrong?

This is from this part of the code:

app.factory('Flash', ['$rootScope', '$timeout',
function($rootScope, $timeout) {

        var dataFactory = {},
            timeOut;

        // Create flash message
        dataFactory.create = function(type, text, addClass) {
            var $this = this;
            $timeout.cancel(timeOut);
            $rootScope.flash.type = type;
            $rootScope.flash.text = text;
            $rootScope.flash.addClass = addClass;
            $timeout(function() {
                $rootScope.hasFlash = true;
            }, 100);
            timeOut = $timeout(function() {
                $this.dismiss();
            }, $rootScope.flash.timeout);
        };

        // Cancel flashmessage timeout function
        dataFactory.pause = function() {
            $timeout.cancel(timeOut);
        };

        // Dismiss flash message
        dataFactory.dismiss = function() {
            $timeout.cancel(timeOut);
            $timeout(function() {
                $rootScope.hasFlash = false;
            });
        };
        return dataFactory;
    }
]);

Multi-line flash message

When showing flash messages that span multiple lines, the close button (x) on the right is misaligned.

I cannot show each error in a different flash message, but need to show it consolidated in a single one. Let me know what CSS fix/hack is required to ensure the close icon is properly aligned.

Thanks!