Question

我正在使用Angular js和bootstrap模式我有这个锚点链接

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

当我点击这个

我打开这个模态框代码

  <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>

这是我的控制器

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;        
    })

  };  
});

哪个工作正常。

我收到了成功消息或失败消息。

现在的问题是。当我重新点击锚标签时。这是打开成功的消息。不是形式。

当我重新点击锚标记时，我想再次打开表单。

任何想法？

由于

Answer 1

点击链接时，只需将$ scope.InviteForm，$ scope.showSuccessAlert和$ scope.showfailAlert的值重置为false。

点击添加 - 点击链接

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

在您的控制器中

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

带有Bootstrap模态的角度js - 重新点击事件没有正确触发

1 个答案: