cordova - 科尔多瓦离子按钮在多个模式中不起作用

Question

这是一个如此奇怪的问题，我什至不知道如何正确命名这个问题。

我的应用列出了多个事件。某些事件需要用户确认“弃权”表格。需要放弃表格的事件有一个按钮“签署放弃表格”。在所有需要豁免表格的事件中，豁免表格按钮会启动一个模式，并且在该模式中有一个确认豁免表格的复选框......当用户选中该复选框时，它会激活“立即接受”按钮。

在第一个事件中，用户进入复选框会激活“现在接受”按钮。但是，如果用户退出模式（无论是否实际单击“立即接受”按钮）并返回到相同的事件模式或退出并进入另一个事件模式，单击复选框将无法激活“立即接受”按钮。用户必须离开应用程序，然后再回来。它只适用于第一个模态 - 一次 - 然后不能在同一个模态或之后的任何其他模态上工作。

这是模态：

  <script id="waiverModal.html" type="text/ng-template">
    <ion-modal-view class="modalCenter">
      <ion-header-bar align-title="center" style="text-align:center;">
        <span style="color:#4e8cf9;text-align:center;">{{club.clubInfo.clSiteName}} LIABILITY/WAIVER FORM
        <br>Event Requires Accepting The Waiver</span>
      </ion-header-bar>
      <ion-content ng-init="fileLoaded=0" style="top:25px;padding-top:5px;">
        <div style="position:absolute;top:0px;left:0px;width:100%;height:100% z-index:1000;background-color:rgba(0,0,0,0.5);" ng-if="fileLoaded==0">
          <div style="text-align:center;margin-top:100px;">
              <div style="background-color:#387ef5;color:white;width:100%;border-radius:10px;">Loading file...</div>
              <div><img style="height:100px;" ng-src="img/ajax_loading.gif"></div>
          </div>
        </div> 
        <!-- ng-model="waiverBox" ng-model="waiverForm" -->
        <div style="padding:5px;font-size:12px;margin-top:25px;"><pre ng-include src="club.ceFormPath" onload="fileLoaded=1"></pre></div>
        <div style="margin:15px;"><input type="checkbox" style="width:30px;height:30px;" id="waiverBox_{{club.ceID}}" ng-click="doWaiver({{club.ceID}})" /> I have read the Liability/Waiver form</div>
        <div id="" class="item" style="font-size:12px;margin:5px;text-align:left;white-space:normal;">
          <div>By clicking "ACCEPT TERMS" you are agreeing to contents of this liability/waiver form</div>
          <button  id="waiverForm_{{club.ceID}}" style="line-height:5px;min-height:20px;font-weight:bolder ;" type="button" class="button button-small button-modalCustom" disabled ng-click="closeWaiver(2)">ACCEPT TERMS</button>
          <button style="margin-left:25px;line-height:5px;min-height:20px;font-weight:bolder ;" type="button" class="button button-small button-modalCustom button-customColor" ng-click="closeWaiver(1)">CLOSE</button>
        </div>
      </ion-content>
    </ion-modal-view>
  </script>

以及激活“立即接受”按钮的控制器功能：

  $scope.doWaiver = function(id) {
    var elBox = document.getElementById('waiverBox_'+id) ;
    var elForm = document.getElementById('waiverForm_'+id)
    if (elBox.checked == true) {
      elForm.disabled = false ;
      elForm.style.backgroundColor = "#387ef5" ;
      elForm.style.color = "white" ;
    } else {
      elForm.disabled = true ;
      elForm.style.backgroundColor = "white" ;
      elForm.style.color = "#387ef5" ;
    }
  }

在我的一生中，我无法弄清楚为什么它一次可以工作......然后直到用户关闭应用程序并再次回来才再次工作。

经过进一步的故障排除后，我发现在第一个选中/取消选中框之后，无论是选中还是未选中，相同的复选框或任何其他模式复选框都注册为“true”。

更新：我在复选框和按钮中都添加了一个 ng-model。 ng-model='waiverBox_[club.ceID]'然后ng-model='waiverForm_[club.ceID]'还添加了一些额外的代码关闭模式。它现在工作得更好，但是在重新进入模式时，复选框未选中，按钮处于非活动状态，当我单击复选框时没有任何反应......甚至没有更改/单击事件函数的触发。然后我取消选中该框并触发，再次选中该框，一切正常。但是为什么第一次检查复选框不工作？

  $scope.closeWaiver = function(type,id) {
    var elBox = document.getElementById('waiverBox_'+id) ;
    var elForm = document.getElementById('waiverForm_'+id) ;
    elBox.checked = false ;
    elForm.disabled = true ;
    $scope["waiverBox_" +id] = false ;
    elForm.style.backgroundColor = "white" ;
    elForm.style.color = "#387ef5" ;    
    if (type == 1) {
      $scope.closeModal() ;
    } else if (type == 2) {
      clubService.getWaiver($scope.club.cID,$scope.club.ceID,$scope.club.ceLiability)
      .then(function(response) {
        if (response[0].success == true) {
          // waiver form accepted
          $scope.closeModal() ;
          $scope.club.ceForm = 1 ;
          $rootScope.refreshClubs = 1 ;
          alert(response[0].msg);
          $scope.$applyAsync(function() {
            $state.go("tab.clubs",null,{reload:true});  
          });
        }
      }) ; 
    }
  }

标签： cordovaionic-frameworkbootstrap-modal