Angular JS: Bootstrap 3.0 Alerts

Problem

Show a single Bootstrap Alert for any action. No need for multiple stacked alerts, just one bootstrap alert.

Solution

I found the Angular UI for Bootstrap Alerts having too much features for this problem. Unless I’m dealing with multiple notifications, then Bootstrap alerts aren’t probably the best since they’re very obtrusive (changes the layout drastically), I’ll probably use some unobtrusive notification scheme.

Here’s a dirty workaround:

js

$scope.mainAlert = {
  isShown: false
};

function showAlert(alertType, message) {
  $scope.mainAlert.message = message;
  $scope.mainAlert.isShown = true;
  $scope.mainAlert.alertType = alertType;
}   

$scope.closeAlert = function() {        
  $scope.mainAlert.isShown = false;
};

var message = 'hi';
var alertClass = 'alert-danger'

showAlert(alertClass, message);    

view

<div class="alert " ng-show="mainAlert.isShown">
  <button type="button" class="close" ng-click="closeAlert()" aria-hidden="true">&times;</button>
  
</div>