动态添加含$parser的AngularJS指令时，$parser未触发的问题

我明白你遇到的困扰：手动添加parseTest指令时一切正常，但通过generateTest动态注入后，$parsers里的逻辑完全没触发。这其实是AngularJS指令初始化顺序的坑——ngModel指令已经先完成了初始化，后续添加的parseTest无法再注入到它的解析管道里。

问题根源 #

当AngularJS编译DOM时，ngModel会先完成自身的初始化流程，包括构建$parsers管道。你原来的generateTest只是在已编译的元素上添加parse-test属性再重新编译，但此时ngModel已经绑定完成，新添加的parseTest虽然会执行link函数，但它的$parsers无法被纳入已初始化的ngModel管道中，自然不会被触发。

解决方案：重新初始化ngModel #

我们需要让parseTest和ngModel一起被重新编译，确保两者的初始化顺序正确。具体做法是先移除原有的ng-model属性，再和parse-test一起重新添加，然后整体编译：

.directive('generateTest', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    priority: 1000, // 设置更高优先级，确保先处理这个指令
    compile: function (elem, attrs) {
      // 保存原有的ngModel绑定值
      var originalNgModel = attrs.ngModel;
      
      // 移除已存在的ngModel和generate-test指令
      elem.removeAttr('ng-model');
      elem.removeAttr('generate-test');
      
      // 添加parse-test并重新绑定ngModel
      elem.attr('parse-test', '');
      elem.attr('ng-model', originalNgModel);
      
      var linkFn = $compile(elem);
      return function (scope, element, attr) {
        linkFn(scope);
      }
    }
  }
}])

另外还要修正parseTest里的一个小问题：你原来的代码里调用了controller.$setViewValue(value)和controller.$render()，这会导致无限循环（设置viewValue会再次触发parser），parser只需要返回处理后的值即可，ngModel会自动同步模型：

.directive('parseTest', [ function () {
  return {
    restrict: 'A',
    require: ['ngModel'],
    link: {
      post: function (scope, element, attributes, ctrls) {
        var controller = ctrls[0];
        controller.$parsers.unshift(function (value) {
          console.log('Parser triggered:', value);
          // 只返回处理后的值，无需手动更新viewValue
          return value ? value.toLowerCase() : value;
        })
      }
    }
  }
}])

为什么这样有效？ #

通过先移除ng-model再重新添加，我们让AngularJS重新编译整个元素，此时parseTest和ngModel会按照正常的指令初始化流程执行：ngModel初始化时，parseTest已经存在，它的$parsers就能被正确注入到ngModel的解析管道中，输入内容时自然会触发parser逻辑。

现在你再测试动态添加的输入框，就能看到模型值被正确转为小写了。

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