CODEWITHSUNDEEP
angularjstwitter-bootstrap-3
Mandeep Singh
Mandeep Singh

Reputation: 8224

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>
        {{errorMessage}}
    </div>
  </div>
</div>

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

console.log(err);
$scope.errorMessage = err.data && err.data.errors && err.data.errors[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 ?

Upvotes: 2

Views: 1281

Answers (2)

Sunny12
Sunny12

Reputation: 383

Here is the workaround I have used

view file: 

<div class="alert alert-{{ResponseModel.ResponseType}}" alert-dismissible ng-show="ResponseModel.ResponseAlert">
<a href="#" class="close" ng-click="ResponseModel.ResponseAlert = false" aria-label="close">&times;</a>
<strong> {{ResponseModel.ResponseMessage}} </strong>
</div>

This helps to close the alert message box when required and also appear again when displaying the alert message. Here ResponseModel.ResponseType will be the type of alert that could info, danger, success, etc., ResponseModel.ResponseAlert will be used to show hide the alert message and ResponseModel.ResponseMessage will contains the message you want to display. You can call the alert message whenever required like described below:

Controller File:

$scope.ResponseModel = {};
$scope.ResponseModel.ResponseAlert = true;
$scope.ResponseModel.ResponseType = "danger";
$scope.ResponseModel.ResponseMessage = "Message to be displayed!!"

Upvotes: 0

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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.

Upvotes: 4

Related Questions