Расширение ввода с использованием моего собственного сервиса

Я хочу расширить ввод текста текста в угловом формате таким образом, чтобы после ввода пользователем какого-либо текста текстовое значение передавалось через настраиваемый фильтр, который выполняет некоторую очистку при вводе ввода, здесь что я не пришел до сих пор, но я получаю сообщение об ошибке:Расширение ввода с использованием моего собственного сервиса

angular.js:13920 TypeError: Cannot read property 'length' of undefined 
    at addDirective (http://bank.com:4000/vendor/bower_components/angular/angular.js:9495:35) 
    at collectDirectives (http://bank.com:4000/vendor/bower_components/angular/angular.js:8677:11) 
    at compileNodes (http://bank.com:4000/vendor/bower_components/angular/angular.js:8539:22)

вот что я написал:

angular.module('app').config(extendInputDirective); 

function extendInputDirective($provide) { 
     $provide.decorator('inputDirective', function($delegate, $filter) { 
      debugger; 
      var directive = $delegate[0]; 

      var link = directive.link; 

      directive.compile = function() { 
       return function(scope,element, attrs, ngModel) { 
        debugger; 
        if(attrs.type === 'text') { 
         ngModel.$parsers.unshift(function(viewValue) { 
          var value = $filter('pArabicCharFilter')(viewValue); 
          return value; 
         }); 
        } 
        link.apply(this, arguments); 
       } 
      } 
     });

источник

2016-09-03 Rachmaninoff

Я не уверен, если вы хотите обновить значение модели или как просмотра и модели. Я предположил, что это и то, и другое.

Для просмотра форматтер и Perser функциональности:

Парсеров называются как только вход изменен пользователем. Они отформатируют текст от пользователя. То есть, просмотр модели обновления.
Форматирование вызывается, когда модель изменена в коде. Они не вызывается, если пользователь изменяет поле ввода. Они отформатируют текст, отправляемый пользователю. То есть, модель для просмотра изменений.

Поскольку форматы не запускаются при обновлении ui. Вам нужно будет обновить значение вида вручную, как в приведенном ниже примере, в котором ввод автоматически заглавный.

(function() { 
 
    'use strict'; 
 
    angular 
 
    .module('exampleApp', []) 
 
    .directive('capitalize', CapitalizeDirective); 
 

 
    function CapitalizeDirective($filter) { 
 
    return { 
 
     require: 'ngModel', 
 
     link: function(scope, element, attrs, ngModelCtrl) { 
 
     function capitalize(text) { 
 
      var capitalizedText = $filter('uppercase')(text); 
 
      ngModelCtrl.$setViewValue(capitalizedText); 
 
      ngModelCtrl.$render(); 
 
      return capitalizedText; 
 
     } 
 
     ngModelCtrl.$parsers.push(capitalize); 
 
     } 
 
    }; 
 
    } 
 
    CapitalizeDirective.$inject = ['$filter']; 
 
})();

<!DOCTYPE html> 
 
<html ng-app='exampleApp'> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <label> 
 
    First name: 
 
    <input type="text" name="firstName" ng-model="firstName" capitalize> 
 
    </label> 
 
</body> 
 

 
</html>

EDIT: посмотреть plunker для обновления всех входов без использования директивы.

источник

2016-09-03 09:49:18 ScottL

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

Попробуйте плункер, который я добавил. – ScottL

Расширение ввода с использованием моего собственного сервиса

ответ

Смежные вопросы