Shawn Shawn - 29 days ago 7
AngularJS Question

Bind an array to the parent of an angular 1.5 component

I am having an issue on implementing two-way binding on a child component. So my goal would be for when an array gets a new object added/removed, the array on the parent component would also reflect that change. Here is some code to better detail.

Parent component controller:

export class ParentController {
selectedItems = [];
}


parent component html:

<list-selector selectedItems="$ctrl.selectedItems"></list-selector>


child component:

export var listSelectorComponent: IComponentOptions = {
bindings: {
selectedItems: "="
},
controller: childController
};


child controller:

export class listSelectorController {

selectedItems = [];

addToSelectedItems(){
this.selectedItems.push({name:'First Item'});
}
}


This is the error I am getting. I am pretty sure it has to do with the binding, but I am not sure what is wrong. Any advice will be greatly appreciated!

Error: [$compile:nonassign] Expression 'undefined' in attribute 'selectedItems' used with directive 'listSelector' is non-assignable!

Answer

Your issue is indeed with your binding. Just change your parent component html to:

<list-selector selected-items="$ctrl.selectedItems"></list-selector>

And you're good to go. Note that the html tag attributes must be like-this while the binding property must always be camelcase likeThis.