Shawn Shawn - 8 months ago 52
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 = [];

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!


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.