В проекте используется не совсем красивое решение, которой мы собираемся исправить. Есть массив объектов приходящий с сервера и описывающий какие контролы нужны для отображения и редактирования модели - это могут быть как простые контролы в виде input type="text", так и более сложные собранные из нескольких тегов, с валидацией динамически подгружаемыми списками и т.д. В настоящее время разметка этих контролов создается в ручную (файл уже содержит > 4000 строк), но у менеджеров родилась идея исправить этот костыль используя angular.js. Проблема в том что приложение поддерживает локализацию, и позиция того же textbox задается в виде placeholder в строке для конкретной локали, например (псевдокод):
var controlData = {
'typeOfControl': 'textAndTextbox',
'name':'underMiles',
'label':'Ignore travels under {0} miles',
'value':'123'
};
/*
тут следует код, который в соответствии с typeOfControl вызовет другой метод.
Тот в свою очередь знает какую разметку нужно собрать,
берет значение label и подставляет вместо {0} разметку textbox,
привязывает события и изменения value при изменения значения в textbox и добавляет валидацию.
*/
В итоге получится разметка следующего вида:
<div id="c_underMiles">
<span class='label'> Ignore travels under </span>
<input id="c_underMiles_textbox" type="text" value="123" />
<span class="label">miles</span>
</div>
Т.к. мы делаем это вручную, то не проблема собрать разметку по элементам, подменяя {0} в label на разметку textbox. Но проблема в том, что позиция {0} может меняться в зависимости от языка.
Соответственно есть 2 вопроса:
1. Можно ли реализовать подобное поведение в angular.js?
2. Правильно ли будет создавать по паре модель-представлении для каждого типа контрола или стоит использовать другой подход?
