在Angular中使用双向数据绑定在范围之间传递数组的正确方法是什么？

Question

Assuming that there is an angular custom directive which uses an isolated scope for array object with two-way binding:

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

So, now if I will add objects to the array everything will work like a charm:

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

However, when I will try to remove object from array via slice method it will not work - array will remain to be the same:

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

Basically, slice creates a new array object which, as I understand, is prohibited by angular. So, the question is - what is the right way of passing array between scopes via two-way data binding with an ability of adding / removing objects ?

EDIT: many thanks to @ryanyuyu for the correct answer and his patience in explaining. In a nutshell:

• the problem has nothing in common with Angular and coupled with vanilla JavaScript API.
• read documentation meticulously because sometimes one character really matters ;-)

Answer 1

Reading the documentation for Array.slice :

slice does not alter. It returns a shallow copy of elements from the original array.

Also of note, the first argument is the starting index, and the second argument is the ending index. To actually change your scope variable, you need to assign the return value like so:

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

---

More likely, you are looking to directly manipulate your array. Use Array.splice (that's splice with a p ) to remove elements from the array.

myArray.splice(itemIndex, 1);

Answer 2

This is an alternative solution that takes advantage of one-way bindings. Two-way bindings should be avoided when you can in Angular. They're more expensive than one-way. I'm adding it because it establishes firm control of the variables involved, and it may be informative to those exploring this type of data binding. (requires at least Angular 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>

Answer 3

Try changing this:

myArray.slice(itemIndex, 1);

to this:

myArray = myArray.slice(itemIndex, 1);

It should work.