Как подружить AngularJS и кастомные инпуты?

Question

[Dartess]

Только начал разбираться в AngularJS, и спросить не у кого...

Пытаюсь использовать получение значения переменной из инпута (radio). Делается это легко - ng-model="realty". До тех пор, пока не навесить на этот инпут кастомный вид... Использую Jquery Form Styler. Получаю обёртку вида:

<div class="jq-radio">
<input type="radio" name="step-1" ng-model="realty" value="house">
<div class="jq-radio__div"></div>
</div>

И... тут ng-model перестает работать. Напрочь.

Окей, всей прелести ng-model я ещё не ощутил. И я решил попробовать заменить ng-model на
ng-click="realty = 'house'"

Ситуация аналогичная. Пока инпуты не стилизированы - работает. Со стайлером - не работает.

Окей, подумал я. А что, если динамически навешивать аналогичный ng-click всем родителям input type="radio"? Навесил. Фейл. Как я понимаю, навешенный после инициализации AngularJS ng-click работать уже не будет.

Дальше - хуже. Из консольки вычислил, что по .click() по самому инпуту срабатывает и переключение (визуальное) стилизованных дивов, и событие ng-click. Сдуру попробовал повесить обработчик click по jq-radio, "кликающий" на дочерний инпут. Получил рекурсию и крах браузера.

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

Answer 1

[lega]

Можете попробовать Angular Light, вот пример только отображает элементы. А так если нужно получать значения.

Отнаследовал стандартный al-radio jsfiddle с двухсторонним связыванием для Jquery Form Styler.

Comments

[lega]

Отнаследовал стандартный al-radio jsfiddle с двухсторонним связыванием для Jquery Form Styler.

[Dartess]

lega: мега-мега-мега огромнейшее спасибо от меня и всех, кто нагуглит эту страницу *___* теперь перепишу то немасштабируемое убожество, что я наговнокодил на jquery, в более-менее приличный вид))

Answer 2

[Сергей Протько]

function MyCustomInputDirective () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModelController) {
             // ... а тут происходит магия
        }
    };
}

Comments

[Dartess]

Теперь бы разобраться, чего с этим делать :) Не подскажете пример использования, или где об этом почитать?

[Сергей Протько]

Dartess: https://docs.angularjs.org/api/ng/type/ngModel.NgM...

[Сергей Протько]

Dartess: можете еще в качестве примера посмотреть собственно на реализацию директив для инпутов в самом ангуляре.

[Dartess]

#всёоченьплохо

[Сергей Протько]

Dartess: там все просто. если упростить, есть два варианта значения, modelValue и viewValue. Первый это то что записывается через дата биндинг, второе - значение инпута, которое нужно для отображения. Есть два массива обработчиков - parsers и formatters для преобразования одного в другое. Есть setViewValue или как-то так который нужно дергать когда вы меняете значение своего кастомного инпута.

как-то так. Валидацию прикручивать по вкусу.

[Dartess]

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

[Сергей Протько]

Dartess: эта функция - директива. Мне просто было лень оборачивать в angular.module('app').directive

[Сергей Протько]

Dartess: внутри ваш же кастыль на jQuery по вызову formatter устанавливает значение (то есть вы в массив должны запихнуть обработчик) и по изменению значения контролом вы должны viewValue установить, и возможно добавить парсер что бы привести значение в нужный вид. Потом и в parsers и в formatters можно запихнуть валидаторы.

Answer 3

[Илья Агарков]

Для того чтобы работать с любыми подобными плагинами jQuery вам необходима директива, которая возьмет на себя работe по синхронизации представления и модели