為什么這個角度表達式在我的模板指令中不起作用

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