AngularJS 指令:如何使用超时隐藏警报? [英] AngularJS Directive: How do I hide the alert using timeout?

问题描述

• 昨天，我开始为我的项目编写通知指令
• 我在 stackoverflow 上提出了问题 AngularJS:警报未显示，并且在努力解决之后文档和视频，我能够构建一个基本的通知指令http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

• Yesterday, I started writing a notification directive for my project
• I asked question on stackoverflow AngularJS: Alerts not showing up and after struggling through documents and videos, I am able to build a basic notification directive http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

我想要什么?

像任何其他应用程序一样，当警报出现时，它们会在一秒左右后隐藏，我正在尝试找到一种方法来在一秒后隐藏警报，但不知道该怎么做

Like any other app, when alerts show up, they hide after a second or so, I am trying to find out a way to hide the alert after a second, but not sure how to do that

非常感谢任何帮助

更新

根据@Derek 的回答，我可以实现超时
http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

As per @Derek's answer, I am able to implement timeout
http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

推荐答案

通常我会用一个数组来实现通知，将新的通知推送到堆栈上，然后设置一个 $timeout 从数组中删除该特定元素.在渲染方面，您只需使用 ng-repeater.

Generally I would implement notifications with an array, that pushes new notifications onto the stack, then sets a $timeout that removes that particular element from the array. On the rendering side you would just use an ng-repeater.

但是，在您的情况下，如果您想保留现有指令，您可以通过添加链接函数并设置 $timeout 来删除元素来完成此功能.

However in your case, if you want to keep your existing directive you could accomplish this functionality by just adding a linking function and setting a $timeout to remove the element.

app.directive('notification', function($timeout){
  return {
     restrict: 'E',
     replace: true,
     scope: {
         ngModel: '='
     },
     template: '<div class="alert fade" bs-alert="ngModel"></div>',
     link: function(scope, element, attrs){
         $timeout(function(){
             element.remove();
         }, 5000);
     }
  }
});

这篇关于AngularJS 指令:如何使用超时隐藏警报?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！