How to fix syntax error for AngularJS component attribute?

Question

Hi I am using this component as a datetimepicker: https://dalelotts.github.io/angular-bootstrap-datetimepicker/

I have multiple date fields generated at runtime, and this component need to refer to the field name as it is shown in code below

<datetimepicker 
    ng-model="param.DefaultValues[0]" 
    datetimepicker-config="{ dropdownSelector: '#{{param.Name}}' }" />

But I am getting the error from angular.js after selecting a date:

I am only asking about this syntax, how to fix it?

Full piece of code is this:

UPDATE

Sorry guys, you all suggested the same syntax,

datetimepicker-config="{ dropdownSelector: '#' + {{ param.Name }} }"

but it didnt work, breaks right away when I open the page:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 28 of the expression [{ dropdownSelector: '#' + {{ param.Name }} }] starting at [{ param.Name }} }].

I think closing single quote is missing here...

georgeawg · Accepted Answer · 2017-04-17 14:39:24Z

1

Double curly bracket {{ }} interpolation works with the id attribute because the $compile service is doing interpolation binding to a native HTML attribute. The datetimepicker-config attribute is an AngularJS component attribute which is evaluated as an Angular Expression.

Don't use interpolation {{ }} inside Angular expressions.

<!-- DONT interpolate in Angular Expressions 
<datetimepicker 
    ng-model="param.DefaultValues[0]" 
    datetimepicker-config="{ dropdownSelector: '#{{param.Name}}' }" />
-->

<!-- INSTEAD -->
<datetimepicker 
    ng-model="param.DefaultValues[0]" 
    datetimepicker-config="{ dropdownSelector: '#' + param.Name }" />

inside what angular expressions? double curly brackets {{}} IS the angular expression. the a value for datetimepicker-config attribute has nothing to do with angular, its simply a JS object {}

The datetimepicker-config attribute is evaluated with one-way < binding. It is not evaluated as a simple JavaScript object. It is evaluated an Angular Expression. Double curly brackets are DOM interpolation binding. Double curley brackets {{ }} are not legal syntax inside Angular Expressions.

For more information, see:

Syntax Error: Token '{' invalid key at column 28 of the expression { dropdownSelector: '#' + {{ param.Name }} } starting at { param.Name }} }

Error: $parse:syntax

Syntax Error

Description

Occurs when there is a syntax error in an expression. These errors are thrown while compiling the expression. The error message contains a more precise description of the error, including the location (column) in the expression where the error occurred.

To resolve, learn more about AngularJS expressions, identify the error and fix the expression's syntax.

— AngularJS Error Reference - $parse:syntax

edited Apr 17, 2017 at 14:39

answered Apr 13, 2017 at 21:23

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Slava Over a year ago

georgeawg, inside what angular expressions? double curly brackets {{}} IS the angular expression. the a value for datetimepicker-config attribute has nothing to do with angular, its simply a JS object {}

georgeawg Over a year ago

Are you saying that you tried the solution and it didn't work?

Slava Over a year ago

georgeawg, it worked ! :) its weird, but it works !! thanks man! I understand now, I will bookmark your answer for future reference. Thanks!

Slava Over a year ago

I haven't read attentively that Dom interpolation part, my mistake of course

Brother Woodrow · Accepted Answer · 2017-04-14 08:42:59Z

1

Like the documentation says, dropdownSelector expects a string. So you would have to concatenate:

<datetimepicker 
    ng-model="param.DefaultValues[0]" 
    datetimepicker-config="{ dropdownSelector: '#' + param.Name }" />

edited Apr 14, 2017 at 8:42

answered Apr 13, 2017 at 18:28

Brother Woodrow

6,3923 gold badges22 silver badges24 bronze badges

1 Comment

Brother Woodrow Over a year ago

My mistake. Shouldn't have used the Angular brackets there.

Otávio Barreto · Accepted Answer · 2017-04-13 19:26:38Z

0

Fix to

<datetimepicker 
data-ng-model="data.embeddedDate" 
datetimepicker-config="{ dropdownSelector: '#' + {{ param.Name }} }" />

add data-ng-model="data.embeddedDate" to your ng-model

edited Apr 13, 2017 at 19:26

answered Apr 13, 2017 at 18:35

Otávio Barreto

1,5683 gold badges18 silver badges38 bronze badges

2 Comments

Slava Over a year ago

added data- according to this doc dalelotts.github.io/angular-bootstrap-datetimepicker, exactly as it say, but its unrelated, the problem with angular expression inside that js object inside attribute syntax ))

Otávio Barreto Over a year ago

Maybe it's a conflit with angular version , test with another version of angular and see how it goes

Collectives™ on Stack Overflow

How to fix syntax error for AngularJS component attribute?

3 Answers 3

Error: $parse:syntax

Syntax Error

Description

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Error: $parse:syntax

Syntax Error

Description

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related