1

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

Hitu Bansal
  • 2,917
  • 10
  • 52
  • 87
  • 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 Jan 08 '15 at 06:26
  • @Innovation: i didn't get you. Can you please explain me – Hitu Bansal Jan 08 '15 at 06:27
  • Another solution can be you handle onClose event of modal via simple javascript. – Innovation Jan 08 '15 at 06:28
  • How. Could you provide example for that – Hitu Bansal Jan 08 '15 at 06:29
  • 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 Jan 08 '15 at 06:30
  • Can't be do this in same code. loading template is not good idea. in this case. because i am not using ny template engine – Hitu Bansal Jan 08 '15 at 06:32
  • AngularJs already have templating engine check thease url http://stackoverflow.com/questions/18716113/scope-issue-in-angularjs-using-angularui-bootstrap-modal & http://stackoverflow.com/questions/16265844/invoking-modal-window-in-angularjs-bootstrap-ui-using-javascript – Innovation Jan 08 '15 at 06:33
  • Use Angular UI Bootstrap or similar: https://github.com/angular-ui/bootstrap – cvrebert Jan 08 '15 at 07:18

1 Answers1

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;
}
Aakash
  • 1,751
  • 1
  • 14
  • 21