使用范围 @ 时自定义指令中的“错误：[$parse:syntax] 语法错误：第 2 列的令牌'{'无效键”答案

【问题标题】："Error: [$parse:syntax] Syntax Error: Token '{' invalid key at colum 2" in custom directive when using scope @使用范围 @ 时自定义指令中的“错误：[$parse:syntax] 语法错误：第 2 列的令牌'{'无效键”
【发布时间】：2018-04-19 21:32:39
【问题描述】：

我从某个库中获得了一个自定义指令，该库具有以下指令：

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

因为它在 isDisabled 中使用了范围 @ 的某些属性，所以我提供的模板如下：

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

这里说Passing data to a custom directive in AngularJS

但它会引发如下错误：

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)

在这里维护Having a hard time debugging error - Token '{' invalid key at column 2

所以我很困惑如何将变量传递给我的自定义指令

【问题讨论】：

我认为这里应该有引号：is-disabled='{{vm.p.q}}'

标签： javascript angularjs custom-directive

【解决方案1】：

您的 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>

应该是

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

我建议使用双引号而不是单引号。

【讨论】：