Я создаю модуль Angular, который позволит динамически строить форму.
По мере выбора элементов в модель добавляется HTML. Модель прикреплена к элементу ng-repeat
.
<div ng-repeat="item in list1 track by $index">
<div compiledom="item.content"></div>
</div>
Итак, item
в модели может выглядеть так:
{
'title': 'Full-Column Text',
'drag': true,
'inputValue': '',
'content': '<div class="small-12 columns"><input type="text" dynamic-model="$index" placeholder="Full Width Text" /></div>'
}
Я использую специальную директиву для компиляции HTML-кода, передаваемого в модель.
.directive('compiledom', function($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compiledom);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
}
})
И используя вторую директиву для привязки данных модели к полю ввода в этом HTML.
.directive('dynamicModel', function($compile) {
return function(scope, element, attrs) {
scope.$watch(attrs.dynamicModel, function(dynamicModel) {
if (attrs.ngModel || attrs.ngModel == dynamicModel || !dynamicModel) return;
element.attr('ng-model', 'item.inputValue'); <---------- bound here
if (dynamicModel == '') element.removeAttr('ng-model');
element.unbind();
$compile(element)(scope);
});
}
})
Моя проблема в том, что все, что я помещаю в поле ввода, помещается в каждый элемент ввода. По какой-то причине кажется, что один item.inputValue
отражается на всех item
того же типа. Модель привязана, но я что-то сломал в ng-repeat, что удерживает ее изолированно.
Например, если у меня есть два поля ввода «Текст в полный столбец», если для одного из них установлено значение «ABC», для обоих установлено значение «ABC». Если бы у меня также было 2 входа «Half-Column Text», они бы не были настроены, пока я не установил один из них на «DCE» - тогда они оба будут установлены на «DCE».
Ссылка на демонстрацию / пример проблемы будет скоро опубликована.