CODEWITHSUNDEEP
angularjsangular-components
Slava
Slava

Reputation: 6650

How to fix syntax error for AngularJS component attribute?

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:

enter image description here

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

Full piece of code is this:

enter image description here

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...

Upvotes: 2

Views: 672

Answers (3)

georgeawg
georgeawg

Reputation: 48968

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

Upvotes: 1

Brother Woodrow
Brother Woodrow

Reputation: 6372

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 }" />

Upvotes: 1

Ot&#225;vio Barreto
Ot&#225;vio Barreto

Reputation: 1568

Fix to 

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

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

Upvotes: 0

Related Questions