Direttiva AngularJS: come nascondere l'avviso utilizzando il timeout?

Question

• Ieri, ho iniziato a scrivere un notification directive per il mio progetto
• ho chiesto domanda su StackOverflow AngularJS: Alerts not showing up e dopo la lotta con i documenti ed videos, sono in grado di costruire una direttiva di base di notifica http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

Quello che ho volere?

Come qualsiasi altra applicazione, quando avvisi appaiono, si nascondono dopo un secondo o giù di lì, sto cercando di trovare un modo per nascondere l'allarme dopo un secondo, ma non è sicuro di come farlo

ogni aiuto è molto apprezzato

UPDATE

Come da @ risposta di Derek, sono in grado di implementare timeout
http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

Answer 1

Generalmente implementerei le notifiche con un array, che invia nuove notifiche nello stack, quindi imposta un timeout $ che rimuove quell'elemento particolare dall'array. Dal lato del rendering si dovrebbe semplicemente usare un ripetitore ng.

Tuttavia nel tuo caso, se si desidera mantenere la direttiva esistente, è possibile ottenere questa funzionalità semplicemente aggiungendo una funzione di collegamento e impostando un timeout $ per rimuovere l'elemento.

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

Answer 2

Ho aggiornato il plunker creato da @daydreamer per mostrare più avvisi e nasconderlo automaticamente. Se qualcuno vuole misura più avvisi hanno un'occhiata a questo Plunker Link

metà del codice stesso di @DerekR, ho fatto solo la personalizzazione ad esso

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