AngularJS指令link函数$setValidity绑定错误元素，单元测试无法访问

听起来你遇到了一个典型的Angular指令验证器绑定偏差问题——功能跑起来没问题，但测试摸不到验证器，还疑似绑错了元素。我来帮你拆解下问题根源，再给你一套可行的解决办法。

一、先揪出问题的核心原因 #

你现在的写法大概率是直接操作了表单的$setValidity，但没指定绑定的元素，或者没通过ngModelController的标准验证器接口注册逻辑。这就导致：

1. 验证状态绑到了父表单/其他无关元素上，而非指令对应的控件；
2. Jasmine测试没法通过Angular的标准验证器接口拿到你的验证逻辑。

二、修正指令的验证器写法 #

别直接操作表单的有效性，改用ngModelController的$validators（同步验证）或$asyncValidators（异步验证）注册逻辑，同时在需要关联表单状态时，明确指定绑定元素：

angular.module('yourApp').directive('testDirective', function() {
  return {
    require: ['ngModel', '^ngForm'], // 同时依赖ngModel和当前嵌套表单
    link: function(scope, elem, attrs, controllers) {
      const ngModelCtrl = controllers[0];
      const formStepCtrl = controllers[1];

      // 注册同步验证器（符合Angular标准，测试可直接访问）
      ngModelCtrl.$validators.testValidation = function(modelValue, viewValue) {
        const inputValue = modelValue || viewValue;
        // 这里写你的验证逻辑，比如判断输入长度
        const isValid = inputValue?.length > 0;

        // 把错误状态绑定到当前指令元素，避免绑错对象
        formStepCtrl.$setValidity('testError', isValid, elem);
        return isValid;
      };

      // 如果需要通过ng-change触发验证，手动调用$validate即可
      scope.$on('ngChange', () => {
        ngModelCtrl.$validate();
      });
    }
  };
});

关键修正点：

• 用require明确拿到当前嵌套表单的控制器，而非直接引用模板里的formStep变量；
• 调用$setValidity时，第三个参数传入指令的DOM元素elem，强制把错误状态绑定到当前控件；
• 通过$validators注册逻辑，让验证器成为ngModelController的一部分，测试时能直接访问。

三、Jasmine测试中访问验证器的正确姿势 #

现在你可以直接从ngModelController里拿到验证器，不用再绕弯子找表单状态：

describe('testDirective', () => {
  let $scope, compiledElem, ngModelCtrl, formStepCtrl;

  beforeEach(module('yourApp'));

  beforeEach(inject(($compile, $rootScope) => {
    $scope = $rootScope.$new();
    $scope.testDirective = { model: '' };

    // 编译包含嵌套表单的指令模板
    const template = `
      <div ng-form="parentForm">
        <tfoot ng-form="formStep">
          <tr>
            <td>
              <div test-directive ng-model="testDirective.model"></div>
            </td>
          </tr>
        </tfoot>
      </div>
    `;
    compiledElem = $compile(template)($scope);
    $scope.$digest();

    // 获取指令对应的ngModel控制器
    ngModelCtrl = compiledElem.find('[test-directive]').controller('ngModel');
    // 获取嵌套表单控制器
    formStepCtrl = compiledElem.find('ng-form').controller('form');
  }));

  it('should mark input as invalid when empty', () => {
    ngModelCtrl.$setViewValue('');
    $scope.$digest();

    // 直接调用验证器函数验证逻辑
    expect(ngModelCtrl.$validators.testValidation('', '')).toBe(false);
    // 验证ngModel的错误状态
    expect(ngModelCtrl.$error.testValidation).toBe(true);
    // 验证嵌套表单的错误状态（绑定到了正确元素）
    expect(formStepCtrl.$error.testError).toContain(compiledElem.find('[test-directive]')[0]);
  });

  it('should mark input as valid when filled', () => {
    ngModelCtrl.$setViewValue('valid content');
    $scope.$digest();

    expect(ngModelCtrl.$validators.testValidation('valid content', 'valid content')).toBe(true);
    expect(ngModelCtrl.$error.testValidation).toBeUndefined();
  });
});

四、额外提醒 #

• 如果是异步验证逻辑，换成ngModelCtrl.$asyncValidators，测试时要处理Promise的resolve/reject；
• 嵌套表单的作用域是继承父表单的，一定要通过require: '^ngForm'拿到当前层级的表单控制器，别直接用模板里的变量引用，避免作用域混乱。

内容的提问来源于stack exchange，提问作者JamesNB