Проверка AngularJS, привязка и т. Д. Не работают при использовании плагинов jQuery (например, autoNumeric)

Question

У меня есть угловая форма, которая успешно использует встроенную проверку угловых. Возьмите следующую разметку, например:

<form name="numberForm" novalidate>
    <input type="text" required />
    <button type="submit">Submit</button>
</form>

Когда браузер загружается, поле ввода отображается следующим образом (ненужные атрибуты удалены):

<input class="ng-pristine ng-invalid ng-invalid-required" />

Если бы я должен был ввести значение в поле ввода, разметка превращается в:

<input class="ng-dirty ng-valid ng-valid-required" />

Все это работало отлично. Затем я реализовал два плагина jQuery для реализации некоторого маскирования / форматирования ввода для формы: autoNumeric и jQuery.maskedinput. Теперь ничего, что я делаю, не изменит оригинал ng-pristine ng-invalid... классы на входе. Это также, кажется, не позволяет связывание моделей быть успешным.

Есть идеи?

Я пытался создать http://jsfiddle.net/ma44H/3/, но не могу понять, как заставить его работать.

Answer 1

JQuery и Angular плохо взаимодействуют

Шоколад и арахисовое масло прекрасно сочетаются друг с другом, но AngularJS и JQuery - болезненная смесь. Мы все пытались (с переменным успехом) сделать это.

Проблема в том, что манипуляции с JQuery DOM работают вне цикла AngularJS Digest. Урок обычно заключается в том, что лучше использовать чистый Angular.

Альтернатива № 1: угловой интерфейс

Попробуйте Angular-UI. Набор инструментов, который может использовать каждый Angular Developer.

Любую маску, которую вы хотите реализовать, можно сделать с их помощью. ui-mask директива:

Хотите маску даты?

    <input type="text" ng-model="date" ui-mask="99/99/9999" />

Валюта Маска?

    <input type="text" ng-model="currency" ui-mask="$99999999.99" />

Маска телефона?

    <input type="text" ng-model="phone" ui-mask="1 [phone]" />

:

См скрипка

:

---

Альтернатива № 2: фильтры

Angular имеет встроенные фильтры:

Валюта:

$filter('currency')(amount, symbol)

Дата:

$filter('date')(date, format)

---

Настаиваете на использовании JQuery? Попробуйте директиву jQuery Passthrough из набора инструментов angular-ui. Я не использовал эту директиву, но это интересный вариант:

Чтобы вызвать что-то вроде $.fn.tooltip(), просто выполните ui-jq="tooltip". Обратите внимание, что имя функции должно быть идентичным. Это также работает для обычных команд jQuery, таких как $.fn.slideUp().

Для передачи параметров используйте атрибут ui-options. Значение будет оценено в контексте $scope и передано функции. Если установлены значения по умолчанию, переданные параметры будут расширять их. Если строка передана, параметры по умолчанию будут игнорироваться.

Используйте имя директивы jq для пространства имен внутри uiJqConfig. Затем укажите подпространства для каждой функции по имени этой функции (именно так, как она передается в ui-jq), чтобы вам не приходилось передавать параметры каждый раз, когда вы вызываете директиву.