Having a hard time debugging error - Token '{' invalid key at column 2

Question

I have encountered an error which I'm unable to debug.

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> 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 getting the following error:

In 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

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

Does someone know why? Thanks!

Answer 1

I notice that this error also happens when binding data to an attribute on a custom directive. Where

$scope.myData.value = "Hello!";

This causes the error:

<my-custom-directive my-attr="{{myData.value}}"></my-custom-directive>

But this works fine:

<my-custom-directive my-attr="myData.value"></my-custom-directive>

Answer 2

Your problem is here:

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

Remove {{ }}:

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

Also you have the same issue here:

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

Replace with:

ng-messages='field.$error'

However fixing those will most likely also cause an error for this line:

ng-message='{{k}}'

So you have to change it to:

ng-message='k'

Answer 3

This problem happened to me when i was following the same tutorial , and i discovered that the solution in my case is that i was using a newer version of ngMessages so i have to update my bower.json file with the same version in the videos (starting from version 1.4 the example doesn't work), then every thing works fine and here is my dependencies section:

"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 4

Lets supppose this is my html

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

Here display-time is the custom directive, whose definition is as follows

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());
        }
    }});

Observe carefully, the syntax used for data="{{array}}".

Since i am using data in the scope of custom directive (with the statement

scope: {
    data: '='
},

),

i will get parse error

But if i use the syntax data="array", and i use the following code snippet inside the link function

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

then i will not get a parse error.

So you should use the syntax data="{{array}}" only if you want to access it as part of attrs parameter inside link function.