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>
  </div>
</div>

Our JavaScript can then look something like:

Lungo.dom('#overlay').hide();

Lungo.dom('#calendarButton').tap(function() {
    Lungo.dom('#overlay').show();
});

Lungo.dom('#hide').tap(function() {
    Lungo.dom('#overlay').hide();
});

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.