Директива AngularJS: Как скрыть предупреждение с использованием тайм-аута?

Как и любое другое приложение, когда появляются предупреждения, они скрываются через секунду или около того, я пытаюсь выяснить способ скрыть предупреждение через секунду, но не знаю, как это сделать

Ответы

Ответ 1

Как правило, я бы реализовал уведомления с массивом, который подталкивает новые уведомления в стек, а затем устанавливает $timeout, который удаляет этот конкретный элемент из массива. На стороне рендеринга вы просто используете ng-повторитель.

Однако в вашем случае, если вы хотите сохранить существующую директиву, вы можете выполнить эту функцию, просто добавив функцию привязки и установив $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

У меня есть обновленный плункер, созданный @daydreamer, чтобы показать несколько предупреждений и скрыть автоматически. Если кто-то хочет настроить несколько предупреждений, посмотрите на 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"
          }
      )
    }
});