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

问题描述

• 昨天，我开始写一个的通知指令我的项目


• 我问的问题计算器 AngularJS：警报显示不出来并通过后挣扎文件和视频，我能够建立一个基本的通知指令<一个href=\"http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=$p$pview\">http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=$p$pview

• 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

任何帮助是极大AP preciated

Any help is greatly appreciated

更新

根据@德里克的回答，我能够实现超时结果
<一href=\"http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=$p$pview\">http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=$p$pview

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

推荐答案

一般来说，我会实现与阵列，是推动新的通知入堆栈的通知，然后设置一个$超时从数组中删除特定元素。在渲染方面，你只想用一个NG-中继器。

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.

不过你的情况，如果你想保持现有的指令，你可以只需添加一个链接功能和设置$超时要删除的元素完成此功能。

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屋！