I recently started working with Angular and managed to implement an alert message for password reset requests in 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('unknown user id');
}
model.resetted = true;
}, function(error) {
deferred.reject(error.data.message);
});
authorizedTracker.addPromise( deferred.promise)
return deferred.promise;
};
If the resetted value is true, the success message will be displayed as shown 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 has been sent to your email
</div>
Now I am looking for a way to automatically hide the alert after a certain amount of time or if the user navigates to another page. How can I achieve this? Any suggestions?