Why doesn't this angular expression work in my template's directive

Question

I have a directive that uses this template:

template: '<div id={{day}} ng-class="daystatus" ng-click="toggle()">{{day | date: "d"}}</div>'

the variable date contains a day which when executed renders as follows:

<div id="&quot;2015-09-21T22:00:00.000Z&quot;" ng-class="daystatus" ng-click="toggle()" class="ng-binding selectable" role="button" tabindex="0">22</div>

Question one: "Why is is placing the double quotes in the string in the first expression?

Question two: As you can see, in this case everything works as expected, but if I try to apply in the first expression to get the same formating as in the second one as such as:

template: '<div id={{day | date: "d"}} ng-class="daystatus" ng-click="toggle()">{{day | date: "d"}}</div>'

it simply does not render as expected producing the following HTML code:

<div id="{{day" |="" date:"d"}}="" ng-class="daystatus" ng-click="toggle()" class="ng-binding selectable" role="button" tabindex="0">22</div>

Any clue on why it is behaving like this?

Answer 1

You must escape the quotes in the attribute:

{
    template: '<div id={{day | date: "d"}} ng-class="daystatus" ng-click="toggle()">{{day | date: "d"}}</div>'
}

To:

{
    template: '<div id="{{day | date: \'d\'}}" ng-class="daystatus" ng-click="toggle()">{{day | date: "d"}}</div>'
}