Last Updated: February 25, 2016
· otupman

Custom notifications in the LAB

A frequent question that's come up internally when using our Lungo Angular Bridge is how to show a notification.

Lungo provides a Notification API, but there are a few issues in using it when it comes to a project based on LAB. Lungo.Notification.confirm() comes with two buttons - each is a <a> tag, and because they have an href value of # the Angular routing will kick in if you're using non-HTML 5 routes. Also, Lungo.Notification.html() allows you to specify your own custom HTML to display. But that doesn't get the Angular scope, so out-of-the-box you can't use what you're used to.

So we have two top feature requests: make notifications work.

Until we write a notification service within the LAB, here's how to make some notifications ala Lungo:

<div id="overlay" class="notification">
  <div class="window show">
    <strong>I'm an overlay</strong>
    <button id="hide">Go away, overlay</button>

Our JavaScript can then look something like:


Lungo.dom('#calendarButton').tap(function() {

Lungo.dom('#hide').tap(function() {

With the overlay in the HTML being used with an Angular controller you obtain the power of Angular with the styling of Lungo.

That's a quick-and-dirty method; I'm 100% sure there's a better way of doing it without using the hide(), however this is intended to demonstrate the possibility of doing this, not the exact how :)

More information

You can check out the relevant Lungo notification CSS classes

There's a JsFiddle that I created to be a simple demo of this.

Finally, if you want to keep track of progress in the LAB, there's the issue about standard notifications and the issue about custom HTML notifications.

Say Thanks