13

我想要的是？

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

任何帮助是极大的赞赏

更新

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

4

2 回答 2

29

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

但是，在您的情况下，如果您想保留现有指令，您可以通过添加链接函数并设置 $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);
     }
  }
});
于 2013-05-29T21:35:14.477 回答
4

我已经更新了 @daydreamer 创建的 plunker 以显示多个警报并自动隐藏。如果有人想自定义多个警报，请查看此Plunker Link

与@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"
          }
      )
    }
});
于 2015-10-17T12:59:37.427 回答