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!) github.com/DerekRies/Angular-Notifications — InCode
– InCode, Commented Feb 13, 2014 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
– Craig Squire, Commented Feb 13, 2014 at 16:38
a simple directive with docs.angularjs.org/api/ng.$timeout when the time is over remove alert from the dom — Whisher
– Whisher, Commented Feb 13, 2014 at 16:43

masimplo · Accepted Answer · 2014-02-13 16:53:36Z

2

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

answered Feb 13, 2014 at 16:53

masimplo

3,8042 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create Self Closing Alert Message in AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related