AngularJS Directive: How do I hide the alert using timeout?

Question

• Yesterday, I started writing a notification directive for my project
• I asked question on stackoverflow AngularJS: Alerts not showing up and after struggling through documents and videos, I am able to build a basic notification directive http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

What I want?

Like any other app, when alerts show up, they hide after a second or so, I am trying to find out a way to hide the alert after a second, but not sure how to do that

Any help is greatly appreciated

UPDATE

As per @Derek's answer, I am able to implement timeout
http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

Organize

I wrote simple notification plugin using notify... may be you can check it out code-like-a-poem.blogspot.in/2013/11/… – Iridis

This isn't working for me :( made exactly what you've done in the plunkr and it didn't work – Arbitress

@Arbitress The plunkr is using a pretty old version of angular, I'm pretty sure the requirements for the directive has changed, mainly the scope – Monopteros

Answer 1

Generally I would implement notifications with an array, that pushes new notifications onto the stack, then sets a $timeout that removes that particular element from the array. On the rendering side you would just use an ng-repeater.

However in your case, if you want to keep your existing directive you could accomplish this functionality by just adding a linking function and setting a $timeout to remove the element.

app.directive('notification', function($timeout){
  return {
     restrict: 'E',
     replace: true,
     scope: {
         ngModel: '='
     },
     template: '<div class="alert fade" bs-alert="ngModel"></div>',
     link: function(scope, element, attrs){
         $timeout(function(){
             element.remove();
         }, 5000);
     }
  }
});

Wartow

Hi Derek, how would you implement this as an array? just curious – Organize

I just recently made an angular component for doing notifications you can check out that does this. (might be different from what you're looking for though). Github Link!. Sorry there's no demo yet, but hopefully you can see a little bit of what I'm talking about. – Wartow

How is same thing possible when I need to change my messages? I have a plunker here - plnkr.co/edit/YioiJXNkaET6T2mexjCq?p=preview – Organize

btw, I have added question #16826261 – Organize

Update your plunk to reference at least angluarjs 1.3.8 and the plnkr starts to work again. Which works for the first 'round', but some error stops more clicks popping up alerts. – Benjamin

@Organize PLEASE CHECK THE JS HERE angular-ui.github.io/bootstrap/#/alert it has an implementation for an array to push messages . – Plowshare

Answer 2

I have updated plunker created by @daydreamer to show multiple alerts and hide automatically. If anybody wants to customized multiple alerts have a look at this Plunker Link

Half of the code same as @DerekR, I have only made customization to it

var app = angular.module('myApp', ['$strap.directives']);

app.directive('notification', function($timeout){
  return {
    restrict: 'E',
    replace: true,
    scope: {
      ngModel: '='
    },
    template: '<div class="alert fade" bs-alert="ngModel"></div>',
    link: function(scope, element, attrs) {
      $timeout(function(){
        element.hide();
      }, 3000);
    }
  }
});

app.controller('AlertController', function($scope){
    $scope.message = {
      "type": "info",
      "title": "Success!",
      "content": "alert directive is working pretty well with 3 sec timeout"
    };

    $scope.alerts = [];
    $scope.addAlert = function(index) {
      $scope.alerts.push(
          {
            "type": "info",
            "title": "Success!" + index,
            "content": "alert "  + index + " directive is working pretty well with 3 sec timeout"
          }
      )
    }
});

Quilting