HTML анализируется с помощью $ compile, ng-model не привязывается изолированно для ng-repeat

Я создаю модуль 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».

Ссылка на демонстрацию / пример проблемы будет скоро опубликована.


person getglad    schedule 28.12.2015    source источник


Ответы (1)


Как оказалось, с моими директивами все в порядке.

Когда я добавлял в свою модель, я использовал .slice. Это вызывало проблему с отражением. Использование angular.copy позволило создать гениального клона, что обеспечило изоляцию, которую я искал.

$scope.list1[x] = angular.copy($scope.list5[x]);

person getglad    schedule 28.12.2015