$parse Syntax Error when binding Angular Expression to Directive Attribute

Question

Can't bind attributes on template using directive

I can't seem to bind attributes on the templates using directives. Any help or suggestion would be great!

It is giving me this error:

[$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{$ctrl.CalendarOpen}}] starting at [{$ctrl.CalendarOpen}}].

Here is my directive:

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

Remove the double curly {{ brackets from the is-open attribute:

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" />`,

The uib-datepicker-popup directive is attempting to evaluate the is-open attribute using the $parse Service and Angular Expressions that start with {{ are illegal.

From the Docs:

Error: $parse:syntax Syntax Error

Description

Occurs when there is a syntax error in an expression. These errors are thrown while compiling the expression. The error message contains a more precise description of the error, including the location (column) in the expression where the error occurred.

To resolve, learn more about AngularJS expressions, identify the error and fix the expression's syntax.

— AngularJS Error Reference - $parse:syntax Error

---

If I add an id="{{$ctrl.CalendarOpen}}", it would not give me that error

In that case there is no error because there is no directive parsing the id attribute. The expression inside the double curley {{ bracket is being evaluated by the $interpolate Service, converted to text, and inserted into the DOM.

When a directives parses an attribute as Angular Expression, it is not wise to mix interpolation into that expression.

From the Docs:

Why mixing interpolation and expressions is bad practice:

• It increases the complexity of the markup
• There is no guarantee that it works for every directive, because interpolation itself is a directive. If another directive accesses attribute data before interpolation has run, it will get the raw interpolation markup and not data.
• It impacts performance, as interpolation adds another watcher to the scope.
• Since this is not recommended usage, we do not test for this, and changes to AngularJS core may break your code

— AngularJS Developer Guide - mixing interpolation and expressions is bad practice