Use angularjs to show update notifications...

[Aidan Mack]

HI,
I want to use angular to show notifications as to whats happening when a user sends data from a form... something like "sending data" and then on return from my servlet "data saved" 

So I am thinking a directive that has some template html?
and using "bind", but I don't no what to bind to? 

something like

element.bind("methodThatSetsWhichclass??", function() {
            element.addClass(attrs.enter);
        })




What I am struggling with is the logic...Normally I would just trigger a method that updates the notification on send and a method that's triggers on return from ajax



Could someone point me in the right direction as what I should use?

[Sander Elias]

Hi Adian,

Is your app evergreen browsers only? If so, have a look at the W3c notification api, There are some polyfills for this too if you need to support feature-poor browsers.

Regards

Sander

[steven smock]

Hi Aidan,

In this case, I would only use a directive if you want to either style your messages in a way that goes beyond CSS, or show messages in more than one place on your page.

Instead, I would try creating a simple service that includes the following methods:

• Push a message to a stack (string array).  
• Since I can have concurrent operations with messages, but only want to show one at a time, an array of messages is necessary.  Note that we will only show one at a time, however.  
• This is usually called when you do your server post.
• Push a timed message to the stack.  
• A message like "Saved!" should linger for about five seconds, then swap out for a default message, or blank.  
• Be sure to use Angular's $timeout service for this.  
• This is usually called in your AJAX callback.
• "Cancel" a message in the stack.  
• Once an operation is done, I typically want to remove one message ("Saving customer data...") while pushing a new one ("Saved!").  
• This is usually called in your AJAX callback.
• Get the message at the top of the stack.
• This will be consumed by the controller that shows your message.

Once your service is working, hook it up to the controllers and services that will be pushing and cancelling messages.  They will call the first three methods.

Finally, create another controller for the area on your page where you want to show the message.  Give the controller's model a method that exposes the service's get method, and then ng-bind that method to an element in your markup.

I realize that description is a little abstract; hope it helps, anyhow!

[Aidan Mack]

Thanks Steven,

Ive had advice from other users on google+ ... Im now trying to scrap using ajax, and im trying to use a resource instead.

Im struggling to figure out how to trigger the resource on a button click.

this is a simple fiddle of it...

http://jsfiddle.net/vb5HS/

Do you think you might point me in the right direction?

Thanks

Aidan

[steven smock]

Aidan,

Sorry to say, I can't really speak to $resource.  Since my APIs don't usually follow an obvious REST structure, I tend to stick with straight $http calls/AJAX callbacks.

Good luck with your project, and if you end up back on the status message bit, feel free to hit me up.

SS

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/JXYg2JysLag/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.