mandeep_m91 mandeep_m91 - 2 months ago 9x
AngularJS Question

AngularJS: How to re-open bootstrap alert after dismissing if error event is triggered again

I am using this HTML snippet at the top of my view to display error messages when a server error is received while performing an action

<div id="message" ng-show="serverError">
<div style="padding: 5px;">
<div id="inner-message" class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>

In my AngularJS code, I do the following operations when a server error is received:

$scope.errorMessage = && &&[0] || err.statusText;
$scope.serverError = true;
$window.scrollTo(0, 0);

It works fine for the first time. However, after I dismiss the alert by clicking on the close button, if I perform the same action again which triggered the error in first place, the alert box is not displayed again. I want it to reappear when an error occurs. After I refresh the page, it works fine. What is the reason for this behaviour and how can I achieve what I am trying to ?


I think you are using jQuery to hide the alert message using data-dismiss flag so the changes of Angular is not updating.

Add a scope method to hide the alert using Angular only.

For example:

$scope.hideAlert() = function(){
    $scope.serverError = false;

And call it on button and remove data-dismiss:

<button type="button" class="close" dang-click="hideAlert()">&times;</button>

This way now Angular will only handle hide/show of alert message and jQuery will not be required.