Struggling to troubleshoot an error - Invalid key Token '{' found at column 2

Question

Struggling to troubleshoot an error - Invalid key Token '{' found at column 2

I am encountering a debugging issue that I can't seem to resolve.

form-field.html

<div class='row form-group' ng-form="{{field}}" ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }">
    <label class='col-sm-2 control-label'> {{ field | labelCase }} <span ng-if='required'>*</span></label>
    <div class='col-sm-6' ng-switch='required'>

        <input ng-switch-when='true' ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' required ng-change='update()' ng-blur='blurUpdate()' />

        <div class='input-group' ng-switch-default>
            <input ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' ng-change='update()' ng-blur='blurUpdate()' />
            <span class='input-group-btn'>
                <button class='btn btn-default' ng-click='remove(field)'><span class='glyphicon glyphicon-remove-circle'></span></button> 
            </span>
        </div>
    </div>

    <div class='col-sm-4 has-error' ng-show='{{field}}.$dirty && {{field}}.$invalid' ng-messages='{{field}}.$error'>
        <p class='control-label' ng-message='required'> {{ field | labelCase }} is required. </p>
        <p class='control-label' ng-repeat='(k, v) in types' ng-message='{{k}}'> {{ field | labelCase }} {{v[1]}}</p>
    </div>
</div>

new.html

<h2> Add New Contact </h2>

<form name='newContact' novalidate class='form-horizontal'>
    <form-field record='contact' field='firstName' live='false' required='true'></form-field>



 <div class='row form-group'>
        <div class='col-sm-offset-2'>
            <button class='btn btn-primary' ng-click='save()'> Create Contact </button>
        </div>
    </div>
</form>

I'm currently facing the following error:

On the browser:

Error: [$parse:syntax] http://errors.angularjs.org/1.4.1/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bfield%7D%7D.%24error&p4=%7Bfield%7D%7D.%24error

Reported on angular site:

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

Any insights into why this might be happening would be greatly appreciated! Thanks!

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

Upon observation, I have also encountered this issue when trying to bind data to an attribute within a custom directive. Here is an example:

$scope.customData.value = "Goodbye!";

The following snippet results in an error:

<my-custom-directive my-attribute="{{customData.value}}"></my-custom-directive>

However, the below code functions correctly:

<my-custom-directive my-attribute="customData.value"></my-custom-directive>

Answer 2

Upon observation, I have also encountered this issue when trying to bind data to an attribute within a custom directive. Here is an example:

$scope.customData.value = "Goodbye!";

The following snippet results in an error:

<my-custom-directive my-attribute="{{customData.value}}"></my-custom-directive>

However, the below code functions correctly:

<my-custom-directive my-attribute="customData.value"></my-custom-directive>

Answer 3

Answer №2

The issue lies in your code:

ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }"

To correct it, remove {{ }}:

ng-class="{ 'has-error': field.$dirty && field.$invalid }"

You'll also encounter a similar problem here:

ng-messages='{{field}}.$error'

Replace it with:

ng-messages='field.$error'

However, rectifying these may lead to an error in this line:

ng-message='{{k}}'

Therefore, modify it to:

ng-message='k'

Answer 4

The issue lies in your code:

ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }"

To correct it, remove {{ }}:

ng-class="{ 'has-error': field.$dirty && field.$invalid }"

You'll also encounter a similar problem here:

ng-messages='{{field}}.$error'

Replace it with:

ng-messages='field.$error'

However, rectifying these may lead to an error in this line:

ng-message='{{k}}'

Therefore, modify it to:

ng-message='k'

Answer 5

Answer №3

During my experience following a tutorial, I encountered a similar issue. Upon investigation, I realized that the problem stemmed from using a newer version of ngMessages compared to what was demonstrated in the tutorial. To resolve this, I updated my bower.json file to match the version used in the tutorial videos. This fixed the issue, and below is the section of my dependencies detailing the changes:

"dependencies": {
  "angular": "1.3.9",   
  "angular-route": "1.3.9", 
  "angular-resource": "1.3.9", 
  "angular-messages": "1.3.9", 
  "bootstrap": "^3.3.6"}

Answer 6

During my experience following a tutorial, I encountered a similar issue. Upon investigation, I realized that the problem stemmed from using a newer version of ngMessages compared to what was demonstrated in the tutorial. To resolve this, I updated my bower.json file to match the version used in the tutorial videos. This fixed the issue, and below is the section of my dependencies detailing the changes:

"dependencies": {
  "angular": "1.3.9",   
  "angular-route": "1.3.9", 
  "angular-resource": "1.3.9", 
  "angular-messages": "1.3.9", 
  "bootstrap": "^3.3.6"}

Answer 7

Answer №4

Imagine this as my own HTML markup

<div ng-controller='MyCtrl' ng-init="array=[{id:1}, {id:2}]">Hey there, it's {{name}}. 
      <div ng-repeat='obj in array'>
        The current time is <display-time data="{{array}}"/>.
      </div>
</div>

In the code above, display-time represents a custom directive defined below

var demo = angular.module('demo', []);
demo.directive('displayTime', function($parse) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            data: '='
        },
        transclude: false,
        template: '<span class="currentTime"></span>',
        link: function (scope, element, attrs, controller) {
            var currentDate = new Date();
            console.log(scope.data);
            element.text(currentDate.toTimeString());
        }
    }});

Pay attention to the usage of data="{{array}}".

When I include data in the scope of the custom directive with

scope: {
    data: '='
},

I encounter a parse error.

However, by changing the syntax to data="array" and updating the following snippet within the link function

scope: {
    //data: '='
},

I can avoid a parse error.

Therefore, stick to using data="{{array}}" only if intending to access it through attrs parameter inside the link function.

Answer 8

Imagine this as my own HTML markup

<div ng-controller='MyCtrl' ng-init="array=[{id:1}, {id:2}]">Hey there, it's {{name}}. 
      <div ng-repeat='obj in array'>
        The current time is <display-time data="{{array}}"/>.
      </div>
</div>

In the code above, display-time represents a custom directive defined below

var demo = angular.module('demo', []);
demo.directive('displayTime', function($parse) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            data: '='
        },
        transclude: false,
        template: '<span class="currentTime"></span>',
        link: function (scope, element, attrs, controller) {
            var currentDate = new Date();
            console.log(scope.data);
            element.text(currentDate.toTimeString());
        }
    }});

Pay attention to the usage of data="{{array}}".

When I include data in the scope of the custom directive with

scope: {
    data: '='
},

I encounter a parse error.

However, by changing the syntax to data="array" and updating the following snippet within the link function

scope: {
    //data: '='
},

I can avoid a parse error.

Therefore, stick to using data="{{array}}" only if intending to access it through attrs parameter inside the link function.

Struggling to troubleshoot an error - Invalid key Token '{' found at column 2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular: Utilizing Nested ng-repeat Alongside groupBy Feature on Initial Page Load or Refresh

What could be causing the element.style.FontSize to not be effective on classes that have been looped through and stored in an array created with querySelectorAll beforehand?

Saving changes made in HTML is not supported when a checkbox is selected and the page is navigated in a React application using Bootstrap

Displaying JavaScript array contents in an HTML page without using the .innerHTML property

Why won't my dropdown menu work properly with JavaScript on certain pages?

Tips for updating the left positioning of a Div element on the fly

Modify the readonly property of an input element in ReactJS

Unable to transform data types

Easy Registration Page using HTML, CSS, and JavaScript

Retrieving data from external JSON files

What is the best way to retrieve information from a data set?

Tips for accessing the URL in PhoneGap and parsing the response with jQuery

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

Performing optimized searches in Redis

What is the best way to create direct links to tabs using #anchors in JavaScript?

What is the best way to eliminate the final character from a series of repeated Xs and following strings

Submitting both $_POST[] data and $_FILES[] in a single AJAX request

I'm encountering some puzzling errors from the Codacy feature in GitHub that are leaving me completely baffled

"There is an issue with the payload size: request entity is too large. What is the solution for handling this in Nest

Python and Javascript clashing with one another