如何将解析器添加到AngularJS指令并替换原始元素？

我想创建一个AngularJS指令来替换de-original元素，并对其解析函数进行一些过滤

第一个示例完全符合我的要求，但该指令并不替换原始元素：

在第二个示例中，当我更改指令以替换元素时，解析函数不再被调用，过滤停止工作：

angular.module（'myapp'，[]）
.directive（'nondigit'，function（）{
返回{
限制：'E'，
要求：'ngModel'，
替换：正确，
模板：“”，
范围：{
非数字模型：'=ngModel'
},
链接：函数（范围、元素、属性、模型控制）{
如果（！modelCtrl）返回；
modelCtrl.$parsers.push（函数（inputValue）{
//在这里过滤
});
}
}
})

---

任何人都能看出我在第二个例子中做错了什么？

经过一些实验，我找到了实现所需行为的方法。最后我使用了两个指令，一个用于对解析器函数应用过滤器，另一个用于替换元素

筛选指令：

.directive('nondigitFilter', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {
        if(!modelCtrl) {
          return; 
        }
        modelCtrl.$parsers.push(function (inputValue) {
            //console.log('parser');
            if (inputValue == undefined) return ''

            var formatted = inputValue.replace(/\D/, '');
            if (formatted!=inputValue) {
              modelCtrl.$setViewValue(formatted);
              modelCtrl.$render();
            }         
             return formatted;         
        });
      }
    }
})

.directive('nondigit', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    replace: true,
    template: '<div><input nondigit-filter type="text" ng-model="nondigitModel"></div>',
    scope: {
        nondigitModel: '=ngModel'
    }
  }
})

<nondigit ng-model="val"></nondigit>

元素替换指令：

.directive('nondigitFilter', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {
        if(!modelCtrl) {
          return; 
        }
        modelCtrl.$parsers.push(function (inputValue) {
            //console.log('parser');
            if (inputValue == undefined) return ''

            var formatted = inputValue.replace(/\D/, '');
            if (formatted!=inputValue) {
              modelCtrl.$setViewValue(formatted);
              modelCtrl.$render();
            }         
             return formatted;         
        });
      }
    }
})

.directive('nondigit', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    replace: true,
    template: '<div><input nondigit-filter type="text" ng-model="nondigitModel"></div>',
    scope: {
        nondigitModel: '=ngModel'
    }
  }
})

<nondigit ng-model="val"></nondigit>

.directive（'nondigit'，function（）{
返回{
限制：'E'，
要求：'ngModel'，
替换：正确，
模板：“”，
范围：{
非数字模型：'=ngModel'
}
}
})

用法：

.directive('nondigitFilter', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {
        if(!modelCtrl) {
          return; 
        }
        modelCtrl.$parsers.push(function (inputValue) {
            //console.log('parser');
            if (inputValue == undefined) return ''

            var formatted = inputValue.replace(/\D/, '');
            if (formatted!=inputValue) {
              modelCtrl.$setViewValue(formatted);
              modelCtrl.$render();
            }         
             return formatted;         
        });
      }
    }
})

.directive('nondigit', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    replace: true,
    template: '<div><input nondigit-filter type="text" ng-model="nondigitModel"></div>',
    scope: {
        nondigitModel: '=ngModel'
    }
  }
})

<nondigit ng-model="val"></nondigit>

以下是工作plnkr：