Developing an alert notification in AngularJS 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:

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


A simple example on how to use it:

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


This is the Plunkr.
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:"&lt;div class='alert alert-{{alertData.type}}' ng-show='alertData.message' role='alert' data-notification='{{alertData.status}}'&gt;{{alertData.message}}&lt;/div&gt;",
            scope:{
              alertData:"="
            }
        };
    }]);    


And html

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




Updated plunkr