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

        
                      

              相关标签:
       
      

Answer 1

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 2

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 3

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