Как добавить анализатор в директиву AngularJS thet заменяет исходный элемент?

Question

Я хочу создать директиву AngularJS, которая заменяет исходный элемент и выполняет некоторую фильтрацию на его функции синтаксического анализа.

Это первый пример делает именно то, что я хочу, но директива не заменяет оригинальный элемент:

http://plnkr.co/edit/H19sKtaQoHMkJak2PzkT

angular.module('myapp', []) 
.directive('nondigit', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, element, attrs, modelCtrl) { 
     if(!modelCtrl) return; 
     modelCtrl.$parsers.push(function (inputValue) { 
      //filtering in here 
     }); 
    } 
    } 
}) 

В этом втором примере, когда я изменить директиву, чтобы заменить элемент , функция парсинга не вызывается больше и фильтрация стопа:

http://plnkr.co/edit/DqmKAYoA1NGQNYuN6fwX

angular.module('myapp', []) 
.directive('nondigit', function() { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     replace: true, 
     template: '<div><input type="text" ng-model="nondigitModel"></div>', 
     scope: { 
      nondigitModel: '=ngModel' 
     }, 
     link: function(scope, element, attrs, modelCtrl) { 
      if(!modelCtrl) return; 
      modelCtrl.$parsers.push(function (inputValue) { 
       //filtering in here 
      }); 
     } 
    } 
}) 

Кто-нибудь может сказать, что я делаю неправильно на втором примере?

Answer 1

После некоторых экспериментов я нашел способ реализовать желаемое поведение. Я закончил использование двух директив, один для применения фильтра к функции парсера, а другой - для замены элемента.

Фильтр директивы:

.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> 

Вот рабочий плнкр:

http://plnkr.co/edit/UW9wCFFXYqzhzy0iqoar?p=preview