AngularJS指令：如何使用超时隐藏警报？

Yesterday, I started writing a notification directive for my project
昨天，我开始为我的项目编写通知指令
I asked question on * 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
我在* AngularJS上提出了问题：警报没有显示，经过文档和视频的挣扎后，我能够建立一个基本的通知指令http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

What I want?

我想要的是？

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

像任何其他应用程序一样，当警报显示时，它们会在一秒左右后隐藏，我试图找到一种方法在一秒钟之后隐藏警报，但不知道如何做到这一点

Any help is greatly appreciated

任何帮助是极大的赞赏

UPDATE

UPDATE

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

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

2 个解决方案

#1

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，从数组中删除该特定元素。在渲染方面，您只需使用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.

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

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

#2

I have updated plunker created by @daydreamer to show multiple alerts and hide automatically. If anybody wants to customized multiple alerts have a look at this Plunker Link

我更新了@daydreamer创建的plunker来显示多个警报并自动隐藏。如果有人想要定制多个警报，请查看此Plunker链接

Half of the code same as @DerekR, I have only made customization to it

代码的一半与@DerekR相同，我只对其进行了自定义

var app = angular.module('myApp', ['$strap.directives']);

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.hide();
      }, 3000);
    }
  }
});

app.controller('AlertController', function($scope){
    $scope.message = {
      "type": "info",
      "title": "Success!",
      "content": "alert directive is working pretty well with 3 sec timeout"
    };

    $scope.alerts = [];
    $scope.addAlert = function(index) {
      $scope.alerts.push(
          {
            "type": "info",
            "title": "Success!" + index,
            "content": "alert "  + index + " directive is working pretty well with 3 sec timeout"
          }
      )
    }
});

#1