CODEWITHSUNDEEP
angularjsarrayssyntax-errorcomponents
SteveB
SteveB

Reputation: 153

Passing an array into a component in Angular 1.5 through an attribute

I'm trying to pass an array from the parent controller into a child component.

<plant-select plants="{{head.permittedPlants}}"></plant-select>

the head.permittedPlants is an array

I get the following error:

"Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{head.permittedPlants}}] starting at [{head.permittedPlants}}]."

can I only pass a string in?

my component looks like this:

let plantSelectComponent = {
  bindings:{
  plants:'<'
},
  template:require('./plantSelect.template.html'),
  controller:plantSelectController
}

controller of the parent below. The "permittedPlantsResolve" is a resolves from UI-Router:

function headerCtrl($scope, $ngRedux, $mdSidenav, $log, permittedPlantsResolve){

  let ctrl = this;


 ctrl.permittedPlants = permittedPlantsResolve;


 ctrl.consoleState = function(){
    console.log($ngRedux.getState());
  }

  ctrl.menuToggle = function(){
    $mdSidenav('left').toggle()
  }

}

export default headerCtrl;

if I change the binding to an "@" it passes the string no problem. Are arrays a possibility? do I HAVE to pass a string?

SOLVED: in the controller for the component I was assigning the $attrs.plants on postLink, assigning it onInit fixed the issue!

Upvotes: 2

Views: 3383

Answers (2)

sledsworth
sledsworth

Reputation: 143

If you remove the {{}} in your template you should be fine still using one way binding (<). The reasons @ works is because {{}} is evaluating your head.permittedPlants to a string before passing. If you plan on changing your array in your component, then you need to use the two way binding (=).

Upvotes: 3

user2697852
user2697852

Reputation:

Change the bindings of plants from < to = and remove the curly braces around the property in the HTML.

Upvotes: 0

Related Questions