x秒或页面更改后再次出现角度隐藏警报消息

时间:2014-08-14 13:30:16

标签: javascript angularjs

我对角度很新,现在当有人从我们的应用程序请求新密码时,我能够显示警告消息:

的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;
};

因此,如果重置为true,则会显示该消息,请参阅以下内容:

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>

但是现在我想在x秒后隐藏警报,或者如果用户点击另一个页面。怎么可能?任何解决方案?

3 个答案:

答案 0 :(得分:6)

你应该使用$ timeout服务(symilar到本机javascript中的window.setTimeout)。

在您的代码中,您应该添加以下代码

...
model.resetted = true;

$timeout(function() {

    model.resetted = false;

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

这是一个例子,希望它会对你有所帮助 http://plnkr.co/edit/Qt39x5Xo5JhP61QHYLwO?p=preview

答案 1 :(得分:2)

要在X秒后关闭,请使用$timeout服务。

model.resetted = true;

$timeout(function() {
  model.resetted = false;
}, X); // X in milliseconds

答案 2 :(得分:0)

对于 angular2+ 用户:

您应该向女巫显示警报的方法添加超时:

setTimeout(() => this.hideAlert(), X);

其中 hideAlert 制作隐藏警报所需的逻辑,X 是毫秒数

这背后的想法是开始计算 X 毫秒,直到 this.hideAlert 被调用

需要箭头函数来保持原始上下文(可以像我们习惯的那样使用它——例如指向父类)