AngularJS Bootstrap alert dismiss-on-timeout attribute doesn't work

Question

I'm trying to use AngularJS Bootstrap alerts like explained here with the "dismiss-on-timeout" attribute. It has no effect in this example, the alert just appears regularly and doesn't disappear.

<alert type="warning" dismiss-on-timeout="2000">Alert text</alert>

It does however work in the ng-repeat example from the site:

<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout="2000">{{alert.msg}}</alert>

Is the problem the missing close attribute? If so, how do you write a close function for an alert that's not part of an array?

Answer 1

Well it works, it's just dismissOnTimeout directive invokes close method of the alert directive controller. This controller in its turn uses outer scope close method. So you need to implement it with so that directive could call it:

<alert type="danger" close="closeAlert()" ng-if="show" 
       dismiss-on-timeout="2000">Something happened.</alert>

and in controller:

$scope.show = true;

$scope.closeAlert = function(index) {
    $scope.show = false;
};

Answer 2

Actually, you do not need to use the variable ($scope.show = false;) to hide the alert(s). All you need to do is to make sure that the array that holds the alerts can only have one item at a time, unless you want multiple/previous alerts showing on the screen. Just delete the alert after showing it. See below:

Markup

<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="2000" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</uib-alert>

Controller

//array to hold the alerts to be displayed on the page
$scope.alerts = [];

/**
 *This function is used to push alerts onto the alerts array.
 */
$scope.addAlert = function(type, message) {

    //add the new alert into the array of alerts to be displayed.
    $scope.alerts.push({type: type, msg: message});
};

/**
 *This function closes the alert
 */
$scope.closeAlert = function(index) {

    //remove the alert from the array to avoid showing previous alerts
    $scope.alerts.splice(0); 
};

So when you want to display an alert:

$scope.addAlert('success', 'My message');