"Error: [$parse:syntax] Syntax Error: Token '{' invalid key at colum 2" in custom directive when using scope @

Question

I'm getting a custom directive from some library who has implimented directive as below:

var directive = {
            restrict: 'E',
            replace: true,
            scope: {
                size: '@',
                id: '@toggleId',
                ngModel: '=',
                isDisabled: '@',
                csChange: '&',
                csTrueValue: '@',
                csFalseValue: '@',
            },
            template: ".......",
        };

since it is using some attribute with scope @ as in isDisabled I'm providing template as below:

<xa-ya-za toggle-id='x{{ vm.x }}' is-disabled='{{vm.p.q}}' ng-model='vm.y' name='thresholdToggle' size='small' ng-click='vm.n($event)'></xa-ya-za>

as said here Passing data to a custom directive in AngularJS

But it throws error as following:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{vm.p.q}}] starting at [{vm.p.q}}].
http://errors.angularjs.org/1.6.5/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bvm.selected.onlythreshold%7D%7D&p4=%7Bvm.selected.onlythreshold%7D%7D
    at a-third-party.min.js:1
    at AST.throwError (a-third-party.min.js:1)
    at AST.object (a-third-party.min.js:1)
    at AST.primary (a-third-party.min.js:1)
    at AST.unary (a-third-party.min.js:1)
    at AST.multiplicative (a-third-party.min.js:1)
    at AST.additive (a-third-party.min.js:1)
    at AST.relational (a-third-party.min.js:1)
    at AST.equality (a-third-party.min.js:1)
    at AST.logicalAND (a-third-party.min.js:1)

As which is maintained here Having a hard time debugging error - Token '{' invalid key at column 2

So I'm confused How I'll pass variable to my custom directives

i think there should be quotes here: `is-disabled='{{vm.p.q}}'` — Kaddath, Nov 07 '17 at 13:04

score 2 · Answer 1 · answered Nov 07 '17 at 13:06

You're missing quotes in your html

<xa-ya-za toggle-id='x{{ vm.x }}' is-disabled={{vm.p.q}} ng-model='vm.y' name='thresholdToggle' size='small' ng-click='vm.n($event)'></xa-ya-za>

should be

<xa-ya-za toggle-id='x{{ vm.x }}' is-disabled='{{vm.p.q}}' ng-model='vm.y' name='thresholdToggle' size='small' ng-click='vm.n($event)'></xa-ya-za>

I recommend to use double-quotes instead of single-quotes.

"Error: [$parse:syntax] Syntax Error: Token '{' invalid key at colum 2" in custom directive when using scope @

1 Answers1