Developing an alert notification in AngularJS

Question

I'm studying Angular and want to develop my own notification alert. This is what I done, I like it and it's working like a charm but I think that it can be improved:

• Do I need to use it in conduction with a service? If yes, how?
• Will it be better if it became an E (element)?
• I needed to put style="display: none;" (see the HTML code) so it does not appear when the page is loaded and I think that it's not the best way. What do I do?
• How can I show and hide more classy, with some animation? CSS? Add/Remove [custom] class?

This is the directive:

myApp.directive('notification', ['$timeout', function ($timeout) {
 return {
 restrict: 'A',
 controller: ['$scope', function ($scope) {
 $scope.notification = {
 status: 'hide',
 type: 'success',
 message: 'Welcome! It\'s yet another angular alert ;)'
 };
 }],
 link: function(scope, elem, attrs) {
 // watch for changes
 attrs.$observe('notification', function (value) {
 if (value === 'show') {
 // shows alert
 $(elem).show();
 // and after 3secs
 $timeout(function () {
 // hide it
 $(elem).hide();
 // and update the show property
 scope.notification.status = 'hide';
 }, 3000);
 }
 });
 }
 };
}]);

This is the HTML:

<div class="alert alert-{{notification.type}}" style="display: none;" role="alert" data-notification="{{notification.status}}">{{notification.message}}</div>

A simple example on how to use it:

<button id="submit" name="submit" class="btn btn-default" type="submit" ng-click="notification.status = 'show'; notification.message = 'Oh yeah!'; notification.type = 'info';">Show</button>

This is the Plunkr.

• slacktracer: I did something similar myself a year ago. Was great to learn and I use it in production till today (there's even a major update coming soon). You my find some inspiration there: github.com/slacktracer/mercurius

Answer 1

One simple thing you can do is remove the need for the $observe and place the template inside the directive and use ngShow to handle the show/hide action. (also added in scope that has two way binding to the alertData object.)

Updated Directive

 var myApp = angular.module('myApp', []);
 myApp.directive('notification', ['$timeout', function ($timeout) {
 return {
 restrict: 'E',
 template:"<div class='alert alert-{{alertData.type}}' ng-show='alertData.message' role='alert' data-notification='{{alertData.status}}'>{{alertData.message}}</div>",
 scope:{
 alertData:"="
 }
 };
 }]); 

And html

<div class="container" style="width: 480px; margin-top: 50px;">
 <notification alert-data="notification"></notification>
<button id="submit" name="submit" class="btn btn-default" type="submit" ng-click="notification.status = 'show'; notification.message = 'Oh yeah!'; notification.type = 'info';">Show</button>

Updated plunkr