"Ошибка: [$parse: синтаксис] Синтаксическая ошибка: токен '{' неверный ключ в столбце 2" в пользовательской директиве при использовании scope @

Question

Я получаю пользовательскую директиву из какой-то библиотеки, которая имеет директиву implimented как ниже:

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>

как сказано здесь Передача данных в пользовательскую директиву в 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)

Как и здесь. Имеется трудная ошибка отладки - неверный ключ токена '{' в столбце 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>

Я рекомендую использовать двойные кавычки вместо одинарных.