Капитализация работает с размытыми, но не заданными переменными в Угловой директиве

У меня проблема с использованием директивы для ввода значений для поля в моей форме.Капитализация работает с размытыми, но не заданными переменными в Угловой директиве

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

Вот plunker: http://plnkr.co/edit/ugrurqAVraRqiJQmDZG7?p=preview

ДИРЕКТИВА

var app = angular.module('plunker', []); 

    app.directive('capitalize', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, modelCtrl) { 
     var capitalize = function(inputValue) { 
      if (inputValue === undefined) inputValue = ''; 
      var capitalized = inputValue.toUpperCase(); 
      if (capitalized !== inputValue) { 
      modelCtrl.$setViewValue(capitalized); 
      modelCtrl.$render(); 
      } 
      return capitalized; 
     } 
     modelCtrl.$parsers.push(capitalize); 
     capitalize(scope[attrs.ngModel]); // capitalize initial value 
     } 
    }; 
    }); 

app.controller('MyCtrl', function($scope,$filter) { 
    $scope.second = "capitalizeme" 
});

ШАБЛОН

<!DOCTYPE html> 
<html ng-app="plunker"> 
    <head> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://code.angularjs.org/1.5.0/angular.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="MyCtrl"> 

    <div> 
     <label>Input 2</label> 
     <input capitalize type="text" ng-model-options="{ updateOn: 'blur' }" ng-model="second" />{{second}} 
    </div> 
    </body> 
</html>

Вы можете видеть, что если вы вводите в поле и оставить, он будет капитализировать все это. Я попытался использовать setTouched(); для запуска проверки, но это тоже не работает.

источник

2016-10-28 jenryb

Почему вы не прописные данные, поступающие от контроллера? –

@JonathanAnctil В реальной жизни мое приложение импортирует данные, которые клиент ввел в другое место. Я не могу контролировать, что они вставляют для импорта, поэтому я обрабатываю его после его ввода. Это просто пример. – jenryb

Да, но данные, которые вы импортируете, должны пройти через ваш контроллер, чтобы вы могли управлять выходом. Возможно, я что-то не понял. –

Моим самым перспективным решением является использование фильтра. Вот plunker:

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

В контроллере

var app = angular.module('plunker', []); 
    app.controller('MyCtrl', function($scope,$filter) { 
     $scope.second = "capitalizeme"; 

     $scope.$watch('second', function (val) { 
        $scope.second = $filter('uppercase')(val); 
       }, true); 
    });

В шаблоне:

<!DOCTYPE html> 
<html ng-app="plunker"> 
    <head> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://code.angularjs.org/1.5.0/angular.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="MyCtrl"> 

    <div> 
     <label>Input 2</label> 
     <input type="text" ng-model-options="{ updateOn: 'blur' }" ng-model="second" />{{second}} 
    </div> 
    </body>

источник

2016-10-28 20:16:35 jenryb

Капитализация работает с размытыми, но не заданными переменными в Угловой директиве

ответ

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