Синтаксическая ошибка $parse при привязке углового выражения к атрибуту директивы

Question

Невозможно связать атрибуты с шаблоном с помощью директивы

Я не могу связать атрибуты на шаблонах с помощью директив. Любая помощь или предложение было бы здорово!

Это дает мне эту ошибку:

[$ parse: syntax] Синтаксическая ошибка: токен '{' неверный ключ в столбце 2 выражения [{{$ctrl.CalendarOpen}}], начинающийся с [{$ctrl.CalendarOpen}}].

Вот моя директива:

app.directive('datePickerDirective', [function () {
    return {
        restrict: 'AE',
        scope: {

        },
        template: `
            <input type="text" class="form-control"
                   uib-datepicker-popup="shortDate"
                   name="date" is-open="{{$ctrl.CalendarOpen}}"
                   ng-model="test" datepicker-options="dateOptions"
                   ng-required="true" close-text="Close" />`,
        controller: function() {
            var $ctrl = this;
            $ctrl.CalendarOpen = true
        },
        controllerAs: '$ctrl',
    }
}]);

Answer 1

Удалить двойную фигурную {{ скобки от is-open атрибут:

template: `
    <input type="text" class="form-control"
           uib-datepicker-popup="shortDate"
           ̶n̶a̶m̶e̶=̶"̶d̶a̶t̶e̶"̶ ̶i̶s̶-̶o̶p̶e̶n̶=̶"̶{̶{̶$̶c̶t̶r̶l̶.̶C̶a̶l̶e̶n̶d̶a̶r̶O̶p̶e̶n̶}̶}̶"̶
           name="date" is-open="$ctrl.CalendarOpen"
           ng-model="test" datepicker-options="dateOptions"
           ng-required="true" close-text="Close" />`,

uib-datepicker-popup Директива пытается оценить is-open атрибут с использованием $parse Service и Angular Expressions, которые начинаются с {{ незаконны

Из документов:

Ошибка: $parse: синтаксическая ошибка синтаксиса

Описание

Происходит при наличии синтаксической ошибки в выражении. Эти ошибки выбрасываются при компиляции выражения. Сообщение об ошибке содержит более точное описание ошибки, включая местоположение (столбец) в выражении, где произошла ошибка.

Чтобы решить эту проблему, узнайте больше о выражениях AngularJS, определите ошибку и исправьте синтаксис выражения.

- Справочник по AngularJS - $parse: синтаксическая ошибка

---

Если я добавлю id="{{$ctrl.CalendarOpen}}", это не даст мне эту ошибку

В этом случае нет ошибки, потому что нет директивы, анализирующей id приписывать. Выражение внутри двойного керли {{ скобка оценивается службой $ interpolate, преобразуется в текст и вставляется в DOM.

Когда директива анализирует атрибут как угловое выражение, нецелесообразно смешивать интерполяцию с этим выражением.

Из документов:

Почему смешивать интерполяцию и выражения - плохая практика:

• Это увеличивает сложность разметки
• Нет гарантии, что это работает для каждой директивы, потому что сама интерполяция является директивой. Если другая директива обращается к данным атрибута до выполнения интерполяции, она получит необработанную разметку интерполяции, а не данные.
• Это влияет на производительность, так как интерполяция добавляет в область действия еще один наблюдатель.
• Поскольку это не рекомендуемое использование, мы не проверяем это, и изменения в ядре AngularJS могут нарушить ваш код

- AngularJS Developer Guide - смешивать интерполяцию и выражения - плохая практика