问题描述:

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_.+-][email protected][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

网友答案:

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;
}
相关阅读:
Top