Блог

Главная - Вопросы по программированию - Угловая директива с ngModelController formatter

Угловая директива с ngModelController formatter

#angularjs #angularjs-directive #angular-ngmodel

#angularjs #angularjs-директива #angular-ngmodel

Вопрос:

Я пытаюсь реализовать простую директиву, которая добавляет средство форматирования в <input type="date"> поле. Директива выглядит следующим образом:

 myApp.directive("date-format", function (dateFilter) {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attributes, ngModelController) {
            ngModelController.$formatters.push(function (modelValue) {
                return modelValue amp;amp; new Date(modelValue);
            });
        }
    };
});

Он работал довольно хорошо, пока я не изменил его имя на mb-date-format . Я создал скрипку JS: http://jsfiddle.net/HB7LU/4458 /. Кажется, он правильно работает с такими именами, как aaa , bbb , ccc и так далее, Но он перестает работать, когда вы меняете имя на jjj , zzz , ….

Комментарии:

1. Попробуйте отдать приоритет вашей директиве; Я не помню механизм наверняка, но заставьте его запускаться явно либо до, либо после input директивы (например priority: 10 , или priority: -10 ). Когда более одной директивы имеют одинаковый приоритет (например, по умолчанию) Angular, похоже, упорядочивает их в алфавитном порядке.

2. Это определенно работает, например priority: 1 , похоже 0 , что это приоритет по умолчанию, и input директива 0 также имеет приоритет. Спасибо!

Ответ №1:

Попробуйте camel преобразовать имя директивы в «DateFormat», например : 

 myApp.directive("dateFormat", function (dateFilter)

а затем в использовать его в HTML, как это 

 <input type="date" ng-model="date" date-format>

Ответ №2:

Просматривая вашу скрипку, я обнаружил пару проблем, которые могут быть причиной:

  1. Вы используете date тип на входе. Встроенные API-интерфейсы выбора даты в браузере очень сложно переопределить, поэтому ваше решение для форматирования не будет работать во многих браузерах.

Часть первая решения: измените тип ввода на текст

<input type="text" ng-model="date" mb-date-format>

Я понимаю, что это означает, что вам, возможно, придется использовать свой собственный сборщик, но если вы хотите настроить, вам нужно будет это сделать. Если вы не возражаете против зависимостей, и ваши требования не слишком велики, AngularUI делает довольно расширяемый datepicker.

  1. Ваша функция синтаксического анализатора никогда не попадает, и вам, вероятно, все равно не нужен анализатор для форматирования.

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