Question

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

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

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

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

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

＆＃34;错误：[$ parse：syntax]语法错误：令牌＆＃39; {＆＃39;第2栏和第34页的无效密钥;使用scope @时在custom指令中

1 个答案: