How to create Self Closing Alert Message in AngularJS

Question

Just Starting out on AngularJS. I would like to create a self close message. How do we do this?

Basically I am attempting to produce the results similar to the following question:

How to Automatically Close Alerts using Twitter Bootstrap

But with AngularJS only.

I'm using the following code through an array. That doesn't work.

 $timeout(function () {
        stack.push(messages.pop());
        checkStack();
    },5000);

I'm looking at this for now but it seems like too much. Perhaps there is an easier (i.e. purer way!) https://github.com/DerekRies/Angular-Notifications — InCode, Feb 13 '14 at 16:31
Are you creating your own message box? If so, create a directive for your message box and in the link function, use the $timeout service to close it. — Craig Squire, Feb 13 '14 at 16:38
a simple directive with http://docs.angularjs.org/api/ng.$timeout when the time is over remove alert from the dom — Whisher, Feb 13 '14 at 16:43

score 2 · Accepted Answer · answered Feb 13 '14 at 16:53

You can definitely use a directive to implement similar functionality without using jquery at all. Just use the $timeout function.

app.directive('myAlert', function($timeout){
  return {
    scope: {
      message: '@',
      isVisible: '='
    },
    link: link,
    restrict: 'E',
    replace: true,
    template: '<div ng-if="isVisible" class="alert">{{message}}</div>'
  }

  function link(scope, element, attrs){
    scope.isVisible = true;

    $timeout(function (){
            scope.isVisible = false;
            }, 5000);

  }
});

Take a look at this plunker: http://plnkr.co/edit/2ApTMAHjvMsq8OE1cInB?p=preview

How to create Self Closing Alert Message in AngularJS

1 Answers1