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

Lets supppose this is my html

Hi, it's {{name}}. 
      

        The current time is .
      

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: '',
        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.