Angular在x秒后或页面更改后再次隐藏警报消息

Question

我很新于Angular，现在我已经可以在我们的应用中当有人请求新密码时显示一个警告消息：

用户模型：

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

所以如果 resetted 为真，消息将显示如下：

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 秒后或者用户点击其他页面后隐藏警告信息。这是否可能？有什么解决方案吗？

- Erik van de Ven

Answer 1

你应该使用 $timeout 服务（类似于本机 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

这个链接是一个示例，可以用来帮助你。

- Polochon

---

好的，代码不正确。但是在 Plunker 上的示例帮了我很多！谢谢！ - Erik van de Ven

把以下與編程相關的內容從英文翻譯為中文。僅返回已翻譯的文本：固定的，抱歉 ^^. 在stackoverflow的文本框中編碼很難。 - Polochon

Answer 2

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

model.resetted = true;

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

- bmleite

Answer 3

对于使用angular2+的用户:

你应该在显示警告的方法中添加超时时间:

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

hideAlert中包含隐藏警报所需的逻辑，X为毫秒数

其背后的思路是开始计算X毫秒直到调用this.hideAlert

需要箭头函数来保留原始上下文（例如，能够像我们习惯的那样使用this - 指向父类）

- Eduard Void