Каков правильный способ передачи массива между областями с использованием двусторонней привязки данных в Angular?

Предполагая, что есть угловая на заказ директива, которая использует выделенную область для массива объекта с двухсторонней связывания:Каков правильный способ передачи массива между областями с использованием двусторонней привязки данных в Angular?

// scope values 
this.scope = { 
    myArray: '=' 
};

Итак, теперь, если я буду добавлять объекты в массиве все будет работать как очарование:

myArray.push(item); // array in the parent scope will be updated

Однако, когда я попытаюсь удалить объект из массива с помощью slice метод не будет работать - массив будет оставаться таким же, :

myArray.slice(itemIndex, 1); // ERROR: array will remain to be the same - item will not be deleted

В основном, ломтик создает новый объект массива, который, как я понимаю, запрещенный угловой. Итак, вопрос в том, каков правильный способ передачи массива между областями посредством двусторонней привязки данных с возможностью добавления/удаления объектов?

EDIT: большое спасибо @ryanyuyu за правильный ответ и его терпение в объяснении. В двух словах:

проблема не имеет ничего общего с угловыми и в сочетании с API-интерфейсом JavaScript на основе ванили.
прочитать документацию тщательно, потому что иногда один персонаж действительно имеет значение ;-)

источник

2016-09-22 Ilya Buziuk

Чтение documentation для Array.slice:

slice не изменяет. Он возвращает неглубокую копию элементов из исходного массива.

Также обратите внимание, что первым аргументом является начальный индекс, а второй аргумент - конечный индекс. Чтобы действительно изменить переменную области видимости, вам нужно присвоить возвращаемое значение следующим образом:

myArray = myArray.slice(itemIndex, itemIndex+1);

Скорее всего, вы хотите, чтобы непосредственно управлять вашим массивом. Используйте Array.splice (это сплайсинг с p), чтобы удалить элементы из массива.

myArray.splice(itemIndex, 1);

источник

2016-09-22 18:09:04 ryanyuyu

Благодарим вас за быстрый ответ. К сожалению, решение с переназначением массива не работает. Не могли бы вы пояснить, почему вы используете (itemIndex, itemIndex + 1) - это недействительно для удаления элемента? –

'slice 'на самом деле не удаляет какие-либо элементы, он возвращает подмассиву из родительского массива. Синтаксис в документации -' array.slice (startIndex, endIndex) '. Поэтому, если вы хотите только вытащить один элемент, вам нужно запустить по индексу и тянуть до конца индекс один больше, что начало. 'сращивание' на самом деле мутирует th e массив. – ryanyuyu

Да, я понимаю, что он возвращает новый массив, который в основном представляет собой вспомогательный массив исходного. Итак, для удаления элемента из массива нужно использовать следующий синтаксис «myArray.slice (itemIndex, 1)», проблема в том, что это не работает для угловой изолированной области с двусторонней привязкой. Решение, которое вы предлагаете «myArray = myArray.splice (itemIndex, 1);» doe не работает: массив в родительской области не изменяется :( –

-1

Попробуйте изменить это:

myArray.slice(itemIndex, 1);

к этому:

myArray = myArray.slice(itemIndex, 1);

Он должен работать.

источник

2016-09-22 18:05:20

Спасибо за ваш ответ, но это решение не работает -.. Массив в родительской области не изменяется :( –

Я просто заметил, используйте 'сплайсинга (ItemIndex, 1)' вместо среза Он изменяет исходный массив. –

Это альтернативное решение, использующее односторонние соединения. Следует избегать двусторонних привязок, если вы можете в Угловом. Они дороже, чем в одну сторону. Я добавляю его, потому что он устанавливает жесткий контроль за вовлеченными переменными и может быть информативным для тех, кто изучает этот тип привязки данных. (требуется, по крайней мере, угловой 1.5)

.directive('myDirective', [function(){ 
    return { 
    scope:{ 
     myArray: '<', 
     onArrayUpdate: '&' 
    }, 
    link: function(scope) { 
     scope.doThings = function(){ 
     scope.onArrayUpdate({index_1: itemIndex, index_2: 1}) 
     } 
    } 
    } 
}]) 

.controller('myController', ['scope',function(scope){ 
    scope.myArray = []; 
    scope.arraySlice = function(index_1, index_2) { 
    scope.myArray = scope.myArray.slice(index_1, index_2);//or whatever your intent is 
    } 
}]) 

<my-directive my-array="myArray" on-array-slice="arraySlice(index_1, index_2)"></my-directive>

источник

2016-09-22 22:16:08 SethWhite

Каков правильный способ передачи массива между областями с использованием двусторонней привязки данных в Angular?

ответ

Смежные вопросы