5
\$\begingroup\$

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.

\$\endgroup\$
1
  • \$\begingroup\$ 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 \$\endgroup\$ Feb 20, 2015 at 8:05

1 Answer 1

3
\$\begingroup\$

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

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.