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?
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).
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!
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With