Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular hide alert message again after x seconds or page change

I'm quite new to angular, now I was able to show an alert message when someone requests a new password, from our app:

Usermodel:

.service('userModel', ['$q', '$http', 'authorizedTracker', function($q, $http, authorizedTracker) {
    this.passwordreset = function(token) {

    var deferred = $q.defer();

    $http({
        method: 'GET',
        url: '/reset/'+token
    })

    .then(function(response) {

    if (!_(response.data).has('user')) {
        deferred.reject('unkown user id');
    }

    model.resetted = true;


    }, function(error) {
        deferred.reject(error.data.message);
    });

    authorizedTracker.addPromise( deferred.promise)

    return deferred.promise;
};

So if resetted is true, the message will show up, see below:

html:

<!-- Succes-->
<div class="alert alert-success animated fadeInDown" ng-cloak  ng-show="userModel.resetted">
    <strong><i class="icon-attention"></i>Success!</strong> New password is sent to your e-mail
</div>

But now I want to hide the alert after x amount of seconds, or if the user clicks to another page. How is that possible? Any solution?

like image 598
Erik van de Ven Avatar asked Aug 14 '14 13:08

Erik van de Ven


People also ask

How do I automatically close an alert after some time?

Closing Alerts To close the alert message, add a . alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

Can we use alert in angular?

Angular Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the required contextual color props (e.g., primary ). For inline dismissal, use the dismissing prop. A simple primary alert—check it out!


1 Answers

you should use the $timeout service (symilar to the window.setTimeout in native javascript).

In your code you should add the following code

...
model.resetted = true;

$timeout(function() {

    model.resetted = false;

}, xxx)//replace xx by the amount of milisecond you want

here is an example, hope it will help you http://plnkr.co/edit/Qt39x5Xo5JhP61QHYLwO?p=preview

like image 82
Polochon Avatar answered Oct 09 '22 17:10

Polochon