current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 3 down vote favorite

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?
  • It will be better if it become an E (element)?
  • I needed to put style="display: none;" (see: html code) so it does not appear when the page is loaded and I think that it's not the best way, what to do?
  • How to show and hide more classy, with some animation? CSS? Add/Remove [custom] class?
  • Any hint and tip will be welcome!

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:

<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

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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

share|improve this answer
    
really thanks! I will improve it and provide a feedback! Cheers! –  CodeWarrior Sep 12 at 19:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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