AngularJS中如何将验证代码与HTML页面分离

我懂你现在的困扰——想把表单里的验证错误提示和主HTML页面拆分开来单独维护，同时还想用ng-bind-html来渲染这些内容，这样代码结构会清爽很多，尤其是在多语言或者多表单的场景下。下面我结合你的代码示例，给你一套可行的实现方案：

1. 创建独立的验证错误模板文件 #

首先，我们把所有验证错误的模板集中放到一个单独的HTML文件里，比如命名为validation-templates.html。这里可以用Angular的ng-template来定义可复用的模板片段，方便后续调用：

<!-- validation-templates.html -->
<script type="text/ng-template" id="employee-id-validation.html">
  <p ng-show="field.$invalid && !field.$pristine" class="help-block requiredText">{{'EMPLOYEE_ID_VALIDATE' | translate}}</p>
</script>

<script type="text/ng-template" id="father-name-validation.html">
  <p ng-show="field.$invalid && !field.$pristine" class="help-block requiredText">{{'FATHER_HUSBAND_NAME_VALID' | translate}}</p>
</script>

<!-- 通用多错误类型模板（适配ng-messages） -->
<script type="text/ng-template" id="generic-validation.html">
  <div ng-messages="field.$error">
    <p ng-message="required" class="help-block requiredText">{{ 'REQUIRED_FIELD' | translate }}</p>
    <!-- 可扩展更多验证类型，比如minlength、email等 -->
  </div>
</script>

2. 在控制器中处理模板信任与传递 #

因为ng-bind-html要求内容是Angular信任的HTML，所以我们需要在控制器中通过$templateCache获取模板内容，再用$sce.trustAsHtml标记为安全内容：

app.controller('YourFormController', ['$scope', '$templateCache', '$sce', function($scope, $templateCache, $sce) {
  // 封装获取验证模板的方法
  $scope.getValidationTemplate = function(templateId) {
    var templateContent = $templateCache.get(templateId);
    return $sce.trustAsHtml(templateContent);
  };

  // 针对特定字段预先处理模板
  $scope.employeeIdValidation = $scope.getValidationTemplate('employee-id-validation.html');
  $scope.fatherNameValidation = $scope.getValidationTemplate('father-name-validation.html');
}]);

3. 修改主HTML页面，引入分离的验证模板 #

现在回到你的表单代码，把原来内嵌的验证提示替换成调用我们的独立模板，这里提供两种适配方式：

方式一：用ng-bind-html渲染（符合你的需求） #

<div class="col-lg-6">
  <div class="form-group">
    <label>{{ 'EMPLOYEEID' | translate }} :</label>
    <input type="text" name="empId" class="form-control" ng-model="EmpId" placeholder="{{ 'EMPLOYEEID' | translate }}">
    <!-- 用ng-bind-html渲染预定义的验证模板，通过ng-init传递当前表单字段 -->
    <div ng-bind-html="employeeIdValidation" ng-init="field = userForm.empId"></div>
  </div>
  
  <div class="form-group">
    <label>{{ 'EMPLOYEE_NAME' | translate }} : <span class="manadatoryIcon"> *</span></label>
    <input type="text" name="userName" class="form-control" ng-model="userName" placeholder="{{ 'EMPLOYEE_NAME' | translate }}" required>
    <!-- 渲染通用多错误模板 -->
    <div ng-bind-html="getValidationTemplate('generic-validation.html')" ng-init="field = userForm.userName"></div>
  </div>
  
  <div class="form-group">
    <label>{{ 'FATHER_HUSBAND_NAME' | translate }}:</label>
    <input type="text" name="fatherOrHusbandName" class="form-control" ng-model="fatherOrHusbandName" placeholder="{{ 'FATHER_HUSBAND_NAME' | translate }}">
    <div ng-bind-html="fatherNameValidation" ng-init="field = userForm.fatherOrHusbandName"></div>
  </div>
</div>

方式二：用ng-include（更推荐，原生支持Angular指令） #

如果不需要强制用ng-bind-html，ng-include其实是更合适的选择——它能直接加载并渲染Angular模板，支持ng-messages、ng-show这些指令，不需要额外处理HTML信任：

<div class="form-group">
  <label>{{ 'EMPLOYEE_NAME' | translate }} : <span class="manadatoryIcon"> *</span></label>
  <input type="text" name="userName" class="form-control" ng-model="userName" placeholder="{{ 'EMPLOYEE_NAME' | translate }}" required>
  <!-- 直接引入通用验证模板，并传递当前字段 -->
  <div ng-include="'generic-validation.html'" ng-init="field = userForm.userName"></div>
</div>

额外优化：把验证规则抽离到服务 #

如果想进一步分离逻辑，可以创建一个验证服务，把字段的验证规则和错误消息逻辑都放到里面，让控制器和HTML更简洁：

app.service('FormValidationService', ['$translate', function($translate) {
  this.getEmployeeIdError = function(field) {
    return field.$invalid && !field.$pristine ? $translate.instant('EMPLOYEE_ID_VALIDATE') : '';
  };

  this.getRequiredError = function(field) {
    return field.$error.required ? $translate.instant('REQUIRED_FIELD') : '';
  };
}]);

然后在控制器中注入这个服务，直接调用方法获取错误消息，再传递到视图中。

这样一来，你的主HTML只负责表单的结构展示，所有验证相关的模板和逻辑都集中在单独的文件里，维护起来会方便很多！

内容的提问来源于stack exchange，提问作者supriya suresh g