Angular js with Bootstrap modal - Re clicking event doesn't trigger properly

Question

I am using Angular js with bootstrap modal I have this Anchor link

<li><a href="#" data-toggle="modal" data-target="#inviteFriendModal" ><span class="frndInvt"></span>Invite Friends</a></li>

When i click on this

i am opening this modal box code

  <div id="inviteFriendModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" >

      <div class="modal-dialog modal-sm" ng-controller="inviteFriendsCtrl">

        <div class="modal-content">
            <div class="alert alert-success" ng-show="showSuccessAlert">
                    <strong>{{successTextAlert}}</strong> 
            </div>
            <div class="alert alert-fail" ng-show="showfailAlert">
                <strong>{{failTextAlert}}</strong> 
            </div>
        <div class="forCancelButton text-right"><button data-dismiss="modal"></button></div>
          <div class="modalMsg" ng-hide="InviteForm"><p>
            <form ng-submit="submitForm()">
                <div class="formRow"><tags-input ng-model="emails" allowed-tags-pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" placeholder="Add an Email" add-on-space="true"  > </tags-input></div>
                <div class="formRow"><textarea rows="5" cols="52" ng-model="message">Hello my custom message </textarea></div>
            </p>
          <div class="actionsBtns">
            <button class="doneModal" ngClick="Submit" >Yes</button>
            <button class="cancelModal" data-dismiss="modal">No</button>
          </div></form>
          </div>
        </div>
      </div>
</div>

and this is my Controller

app.controller('inviteFriendsCtrl', function ($scope, $http) {
  $scope.submitForm = function() {
    $http({ 
      url: "invitefriends",
      data: {emails:$scope.emails,message:$scope.message},
      method: 'POST',
    }).success(function(data){
      $scope.InviteForm= true;
      $scope.successTextAlert = data;
      $scope.showSuccessAlert = true;


    }).error(function(err){ 
      $scope.InviteForm= true;
      $scope.failTextAlert = "There is some problem. Please try again";
      $scope.showfailAlert = true;        
    })

  };  
});

Which is working fine .

I got success message or fail message.

Now Problem is that . When i re-click anchor tag. it is opening sucess message. not a form.

I want to open form again when i reclick anchor tag.

Any Ideas?

Thanks

I suggest you to use code inside modal as template and then append this template div in modal on success message.That will solve your problem. — Innovation
– Innovation, Commented Jan 8, 2015 at 6:26
Another solution can be you handle onClose event of modal via simple javascript. — Innovation
– Innovation, Commented Jan 8, 2015 at 6:28
I mean use modal code as template and on link click load the respective template.After first call success message assigned on the modal and when you re click the link it will show that success message. — Innovation
– Innovation, Commented Jan 8, 2015 at 6:30

Aakash · Accepted Answer · 2015-01-08 07:42:19Z

1

Just reset the value of $scope.InviteForm, $scope.showSuccessAlert and $scope.showfailAlert to false when clicked on the link.

Add ng-click to your link

<a href="#" data-toggle="modal" data-target="#inviteFriendModal" ng-click="showForm()"><span class="frndInvt"></span>Invite Friends</a>

In your controller

$scope.showForm = function(){
    $scope.InviteForm = false;
    $scope.showSuccessAlert = false;
    $scope.showfailAlert = false;
}

edited Jan 8, 2015 at 7:42

answered Jan 8, 2015 at 7:06

Aakash

1,8211 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hitu Bansal Over a year ago

How to do this. Could you provide example

Collectives™ on Stack Overflow

Angular js with Bootstrap modal - Re clicking event doesn't trigger properly

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related