为什么这个角度表达式在我的模板指令中不起作用

Question

我有一个使用此模板的指令：

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

可变日期包含执行时的日期，如下所示：

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

问题一：“为什么在第一个表达式的字符串中加上双引号？

问题二：如您所见，在这种情况下，一切都按预期工作，但是如果我尝试在第一个表达式中应用以得到与第二个表达式相同的格式，例如：

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

它根本无法按预期方式生成以下HTML代码：

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

关于它为何如此行为的任何线索？

Answer 1

您必须对属性中的引号进行转义：

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

至：

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