jirikavi / angularjs-toaster Goto Github PK

For me toaster only show the info message types irrespective of type.

I have tried calling it by

toaster.pop('warning', "Cancelled", "Grouping operation cancelled.");
toaster.pop({type:'error', title: "Error", body:"Oops...something broke. Please try again"});

Always show the green toast with the info icon.

Any idea why??

I have add all the dependices and module in my application but still nothing chnaged. Everytime i do a toaster.pop() it does display toast with the correct title and message but the same info one.

What's the difference for the toastr by Jonh Papa?
I could easily work with the toastr, couldn't I?

myApp.value('toastr',toastr);

Supposing toastr library is loaded.
So, why should I use the AngularJS-Toaster?

Hi,
it would be nice to be able to apply application corporate styles with preprocessor variables.

Hi,

I would like to have a possibility to manually define a way of displaying toaster. For example, I would have an option closeButton on the error notifications.
How can I do that?
I've done something like this, but it doesn't work:

toaster.pop('error', 'Error message', {
closeButton: true
});

Hi ,

I think some developer like me would like to use font icon instead of base64 embedded icon. I wonder if you want to go that way.

To achieve that, we just need to change a few lines of code.

Here is the code
Here is how it look in demo

BTW, I used fontawesome in the example.

Sam

Hi,
Could it be possible to have angularjs-toaster available through bower ?
Here is a link explaining how to do it : http://bower.io/#registering-packages
Thanks in advance

The global 'use strict' directive might cause problems when the file gets concatenated with legacy code. Please wrap the whole JavaScript file in an anonymous function and place the 'use strict' directive as the first line in the function.

Thank you!

//imported scripts
https://code.angularjs.org/1.2.12/angular.js
bootstrap.min.css
font-awesome.min.css

jquery.min.js
bootstrap.js
angular.min.js

angular-animate.min.js
toaster.js
toaster.css

ui-bootstrap.js
angular-sanitize.min.js
angular-file-upload.min.js
angular-ui-router.min.js
underscore-min.js
smart-table.min.js
//imported scripts

This is the script i am using is there any clashes or any thing wrong i am doing

toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'animation-class': 'toast-top-center'}"></toaster-container

toaster.pop('hi', "Message", 'hello', 3000, 'trustedHtml', 'goToLink');

It is showing toaster but on the top right side how can i make it to show in center

Note : Its done please close it. Thanks...

I downloaded the zip file. And copy the toaster.js into js folder and toaster.css to css. I used them in the program, they loaded successfully. But when I injected module 'toaster' into my app, it says cannot load module.

How do you change the fade in / out animation durations?

Does the angularjs-toaster directive support IE9?

Since ng-animate no longer with AngularJS 1.2+, why do not remove it?
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
Thanks! still one my favorites directives :)

Posted in the wrong repo, my apologies!

Hi,

Currently storing a list of notifications that need to be displayed to a user when they open the application in a Database. I needed to capture when either they click on the notification to dismiss it or if its not sticky when the notification closes.

I changed the constructor to this so I could pass a UNID which is the DB reference:

this.pop = function (type, title, body, timeout, bodyOutputType, clickHandler,unid) {
            this.toast = {
                type: type,
                title: title,
                body: body,
                timeout: timeout,
                bodyOutputType: bodyOutputType,
                clickHandler: clickHandler,
                unid:unid
            };

I then modified the removeToast method to broadcast a new event with the toaster object so I can update the DB.

   $scope.removeToast = function (id) {
                        var i = 0;
                        var selectedToaster={};
                        for (i; i < $scope.toasters.length; i++) {
                            if ($scope.toasters[i].id === id){
                                selectedToaster=$scope.toasters[i];
                                break;
                            }
                        }
                        $scope.toasters.splice(i, 1);
                        $rootScope.$broadcast('toaster-Removed',{'toaster':selectedToaster});
                    };

I had already modified the custom click handler - mentioned in another issue:

 $scope.click = function (toaster) {
                        if ($scope.config.tap === true) {
                            if (toaster.clickHandler) {
                                $scope.$parent.$eval(toaster.clickHandler(toaster));
                                $scope.removeToast(toaster.id);
                            } else {
                                $scope.removeToast(toaster.id);
                            }
                        }
                    };

For example on submit form button click, if no required fields, pop message. But if user click 10 times or continue clicking messages continue to be added to messages stack.

I know that there is no sense for user to do that. But anyway, is there a way that if the same message already exists, then we only extend or reset it's lifetime? May be some bounce animation also?

Is there an example of how to use a body template?

I noticed that the dependency on angular is 1.2.14 and would like to suggest making the dependency the lowest angular&animate needed to make AngularJS-Toaster work.

The JS file does not contain any version information

Hey,

I'm having issues using both: "AngularJS-Toaster" and "angular-nvd3" with d3 library, resulting in:
Cannot set property 'd3' of undefined

It's wrote on the README file that the current version is 0.4 but the bower.json file version is 0.3.0.

Is it possible to update the bower.json file with the current version and create a tag ? Thanks to this, it will be possible to install it using bower.

Is it not possible to have error messages stay until clicked but info go away in a timer? As far as I can tell, this is a service configuration but it would be nice to be able to override the defaults in the pop() method.

The latest release (0.4.8) breaks apps using Angular ~1.2.0. Bower now resolves angular-animate to 1.3.0, which depends on angular#1.3.0. This introduces this issue;

Unknown provider: $$qProvider <- $$q <- $animate <- cfpLoadingBar <- $http <- $modal <- modals

Should've been a 0.5 release.

Hi Jiri,
Let me tell you, first that all, that your work is awesome!

I Just wanted to know if it's possible to add a .min.js in the repository.
I've generated one by myself and I was wondering if you could included as other gits available in the community.

Thanks in advance!
*my apologies if this is not the correct place for this request.

This is not compatible with Angular 1.2 as ng-animate is no longer a directive

How can I use the toaster as a service?
I need to use it in all my project angularjs.
I've tried something, but the ng-controller appears required.
Is there another way?
I need fire the pop() inside any controller.

Would be appreciated to have the methods and options :D

Hello,

I'm beginner with angularJS and may be don't understand something, but strange thing is happened and toast doesn't appear.

I've made some investigation, here are some results:

1. Toast has been added in "scope.toasters"
2. Ng-repeat doesn't catch it.

Solution:

Add "scope.$digest();" on 115 line.

Please provide some other variant or I can make pull request.

Hello!

Thanks for AngularJS-Toaster.

How can I add html to {{toaster.body}}, from my controllers scopes?

I can save template to file, like templateUrl and then paste necessary html that I need... I can make many templateUrl for each my task and add arrgs to pass what template I want to show at time. But it`s bad way.

I'd love to use this off of cdnjs.
https://github.com/cdnjs/cdnjs

Do you already deliver to npm? cdnjs has a setting to automatically pull from npm every 4 hours, so after an initial setup, hopefully you can just forget about it. :) Thanks for a great plugin!!

(from cdnjs) Enabling NPM auto update

We automatically update libraries that are also hosted on NPM e.g. Lodash.

This script runs automatically every 4 hours

Update the package.json and configure it as below and submit a pull request.
// Lodash package.json
// ...
"npmName": "lodash",
"npmFileMap": [{
"basePath": "/dist/",
"files": [
"*"
]
}],
// ...
npmName should map to the name of the library on NPM npmFileMap is a white list of files to take from the NPM tarball and host on the cdn basePath will be ignored when copying over to the cdn files is a pattern matcher that you can select many files with

The above example looks in the tarball whose structure might look like

dist/lodash.js
dist/lodash.min.js
README It then will look for dist/* which will find the two files inside the dist folder. It will now copy it over to cdnjs but without the dist path. Such that they will end up. ajax/libs/lodash.js/2.0/lodash.js

In the bower.json file, it is asking for Angular 1.2.6. The latest Angular version is 1.2.26 according to their website, although a recent bower update did find 1.2.27. Either way, Toaster is looking for a version of Angular which isn't out. Locally, the my app builds fine and toaster works as expect. However, when putting it through TeamCity, the bower update fails as it cannot find version 1.2.6 of Angular. I've changed my project to reference release 1.4.5 and TeamCity builds as expected. Is the reference to 1.2.6 a typo?

Can you remove the Bootstrap dependency?

Including it can be destructive for sites not currently using bootstrap.

Stops the carousel from receiving the transitionEnd event.

Is this working with 1.3? When I add it to my project using the ng-animate 1.2.8 I get a ton of errors.

TypeError: object is not a function

Both are missing the [, function(){}] syntax;

.service('toaster', ['$rootScope', function ($rootScope) {

.controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {

Hi,

I'm trying to understand an issue that ocurred when I was trying out AngularJS-Toaster like shown below. I'm aware this is not the way to use it, I was just trying to experiment in the Chrome console:

  angular.module('DemoApp').controller('demoCtrl', function($scope, toaster) {
    window._toaster = toaster;
    _toaster.pop('success', "title", "text");
  });

What happens is that I can call _toaster.pop('success', "title", "text"); 20 times in the console, and no toast will show up until the first toast that was created is destroyed after its timeout.

To better understand this, I put together a simple demo, here.

I don't know if the problem is related to AngularJS scoping, or linking the directive, or something else.

I'm using the master version of toaster.js with AngularJS 1.2.0, if that helps.

Thank you!

At AngularJS-Toaster/toaster.js:72:39

The problem occurs when I use the toasterContainer directive without toasterOptions attribute, therefore the condition on line is not met and the mergedConfig is not initialized. The component then can't be run. Plunker: http://plnkr.co/edit/ByDcv1DK9mp4FBgUHROP?p=info

Version: 0.4.5

Hi am having a problem where only the first toast after refreshing the page would work with the correct type param, all following toasts just default to the blue color which is the info type.

is it possibile to implement "containerId" option to let appera notification inside a div instead the whole body?

In normal Toastr, using a message with HTML in it will display that HTML in the toast

In this version, it looks like the HTML is being passed back as text by Angular

It would be great if we could access an existing toast by ID, like the way KayHadrin implemented it in his/her fork. Thanks!

Original question: Is it possible to have support for templates? I'd like to use this but provide my own HTML instead of what the original toaster is using. It would be nice to be able to replace {{toaster.body}} with a specific template.

EDIT
I noticed there is code for toaster.html in there but is it possible to specify a template?

$rootScope.$broadcast propagates the event down from the $rootScope until it hits the scope with the directive. For performance reasons it might be better to use $rootScope.$emit and in the directive $rootScope.$on instead of scope.$on.

Anyway, thanks for a great module 👍

Has anyone had any success in implementing this into a default meanjs.org application? I can provide details on my setup, if asked. However, my application config & architecture is the meanjs.org stack.

I've spent some time trying to implement it, but there seems to be something wrong with loading the AngularJS-Toaster service, and adding it to my application's dependencies. When I add it to my array of dependencies in core.client.module.js, the application won't load. I've seen similar issues when dependencies are loaded more than once. If I remove it from the dependencies, my app will load but when I add the toaster service to any of my controllers, the controller doesn't seem to load. I'm wondering if there is something that is being done in the Toaster service, or directive, that is not compatible with the meanjs.org stack.

I use angular and angular-animate with version 1.2.15
I use AngularJS-Toaster with version 0.4.5 (via bower)

However, it seems Toaster are not stable. Sometime it just didn't show. I still can't get the reason. There is no error message.
Does anyone face this problem also?

Hi,

Is there a way to attach a custom action on the toaster cards? I am currently trying to pop a message that when will resend a verification email to the user.

thanks

AngularJS-Toaster supports what all browsers?