迭代(二)

模态窗口

任务描述：点击按钮，弹出moudle窗口

相关代码片段：

//js相关片段

$scope.returnAgainMark = function () {
  var modalInstance = $modal.open({
    backdrop:'static',         //锁定背景，点击模态窗口其他地方不关闭模态窗口
    templateUrl: 'returnAgainMarkModal.html',
    resolve: {
      teacherMarkQuestionContentInfo: function(){
        return $scope.teacherMarkQuestionContentInfo; //将模态窗口外面页面的值
                                           teacherMarkQuestionContentInfo传入到模态窗口
      }                                                      },    controller: ['$scope', '$modalInstance', 'teacherMarkQuestionContentInfo', function ($scope, $modalInstance, teacherMarkQuestionContentInfo) {      $scope.state = false;      $scope.reason = {        value: ''      };      //点击按钮添加原因      $scope.setReturnReason = function (str,reasonForm) {        var temp = '';        if(angular.isDefined($scope.reason.value)){          temp = $scope.reason.value;        }        if(!!$scope.reason.value && $scope.reason.value.length > 50){          reasonForm.returnReason.$setValidity("reasonMaxLength", false);          return false;        }else{          reasonForm.returnReason.$setValidity("reasonMaxLength", true);        }        $scope.reason.value = temp + str + ' ';      };      //确定提交退回重阅原因      $scope.confirmReason = function (reason, reasonForm) {        if(!!$scope.reason.value && $scope.reason.value.length > 50){          reasonForm.returnReason.$setValidity("reasonMaxLength", false);          return false;        }else{          reasonForm.returnReason.$setValidity("reasonMaxLength", true);        }        if (reasonForm.$invalid) {          reasonForm.doValidate();          return false;        }        var markPapersQuestionList = teacherMarkQuestionContentInfo.markQuestionInfo.markPapersQuestionList;        var markQuestions = [];        angular.forEach(markPapersQuestionList, function(member){          var markQuestion = {            markTotalScore: member.markTotalScore,            questionName: member.questionName,            questionTypeName: member.questionTypeName,            testQuestionId: member.testQuestionId,            totalScore: member.totalScore,            unitQuestionId: member.unitQuestionId          };          markQuestions.push(markQuestion);        });        var params = {          examId: $stateParams.examId, paperId: $stateParams.paperId,          teacherId: $stateParams.teacherId,          markGroupId: teacherMarkQuestionContentInfo.markGroupNo,          studentId: teacherMarkQuestionContentInfo.markQuestionInfo.studentId,          questionGroupId: $stateParams.questionGroupId,          teacherName:$stateParams.teacherName,          returnMarkReason:$scope.reason.value        };        params.markQuestions = markQuestions;        returnAgainMark.save(params,function(result){          if(result.status.value ==1){            showInfo("退回重阅成功");          }else if(result.status.value ==-1){            showInfo(result.message);          }else {            showInfo("退回失败！");          }          $modalInstance.close(reason);        },function(){});      };      //关闭窗口      $scope.cancel = function () {        $modalInstance.dismiss('cancel');      }    }]  });  modalInstance.result.then(function (reason) {    //保存正确跳到下一题    // $scope.getQuestion(false);  });};

//moudle相关HTML片段
<script type="text/ng-template" id="returnAgainMarkModal.html">
  <div class="container-fluid">
    <div class="widget-box">
      <div class="widget-content">
        <h4 class="modal-title" style="margin-bottom: 20px;"><b>退回重阅</b></h4>
        <form name="reasonForm" w5c-form-validate="{'blurTrig':false}" novalidate role="form" autocomplete="off">
          <div class="form-group">
            <label class="mb5" >请输入退回重阅原因：</label>
          <textarea name="returnReason" ng-model="reason.value"
                    rows="5" class="form-control" maxlength="50"
                    placeholder="少于50字" labelname="退回重阅原因" required></textarea>
            <small ng-show="reasonForm.returnReason.$error.reasonMaxLength" style="color: #843534;">该选项输入值长度不能大于50</small>
            <ul style="padding-left: 0px;">
              <li class="btn btn-link " ng-click="setReturnReason('分数过高', reasonForm)">●&nbsp;分数过高</li>
              <li class="btn btn-link " ng-click="setReturnReason('分数过低', reasonForm)">●&nbsp;分数过低</li>
              <li class="btn btn-link " ng-click="setReturnReason('正确给分错误', reasonForm)">●&nbsp;正确给分错误</li>
              <li class="btn btn-link " ng-click="setReturnReason('错误给分正确', reasonForm)">●&nbsp;错误给分正确</li>
            </ul>
          </div>

        </form>
        <div style="text-align: center;">
          <button type="button" class="btn btn-success" ng-click="confirmReason(reason, reasonForm)">确定</button>
          <button type="button" class="btn btn-primary" ng-click="cancel()">取消</button>
        </div>
      </div>
    </div>
  </div>
</script>
安全校验：
 $scope.confirmReason = function (reason, reasonForm) {

        if(!!$scope.reason.value && $scope.reason.value.length > 50){
          reasonForm.returnReason.$setValidity("reasonMaxLength", false);
          return false; //if条件为true时，显示<small>
        }else{
          reasonForm.returnReason.$setValidity("reasonMaxLength", true);
        }

        if (reasonForm.$invalid) {
          reasonForm.doValidate();
          return false;
        }
//reasonForm: form表单name值，作为函数参数传入
<small ng-show="reasonForm.returnReason.$error.reasonMaxLength" style="color: #843534;">该选项输入值长度不能大于50</small>
//关闭窗口
$scope.cancel = function () {
  $modalInstance.dismiss('cancel');
}

modalInstance.result.then(function (reason) {
  //保存正确跳到下一题
  // $scope.getQuestion(false);
});

ng form 会给根据具体情况给表单里的每项自动添加下列 css class：
    
    
ng-valid: 验证通过
ng-invalid: 验证没有通过
ng-pristine: 用户没有输入任何东西
ng-dirty: 用户输入了东西， 不管最终值有木有改变。 例如开始里面是空的， 填写了ab， 之后又吧ab删除了， 这是也是dirty的.