角度事件檢測，日期選擇器關閉

Question

我剛開始使用有角度的工具，並且通常喜歡它。 我有一個UI要求，將日期顯示為文本，然后單擊文本時，它將顯示日期選擇器。 然后，當您選擇一個日期時，它會返回到文本。 聽起來很簡單。

我在下面的代碼中嘗試了一些變體，正在編輯的對象擁有一個稱為editdate的值，單擊文本框將其更改為true，然后隱藏文本並顯示編輯器。 效果很好，問題在於隱藏了日期選擇器。 我嘗試在日期選擇器中添加ng-blur，以使該框在失去焦點時隱藏起來，但這對於它是否起作用是非常斷斷續續的。 然后，我嘗試了ng-Mouseleave，但是當我將鼠標指針從文本框中移到日期選擇器中時，該框關閉了。

<td colspan="7">
    Required Date : <span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">{{item.dueDate.toDateString()}}</span>  
    <input type="date" ng-blur="item.editdate=false" ng-click="item.switcheditdate(item.delayeditclose)"  ng-show="item.editdate" class="datepick" ng-model="item.dueDate" ng-focus="selectPart(item.partNumber)" />
</td>

javascript初始化為：

                for (var i = 0; i < data.items.length; i++) {
                    item = data.items[i];
                    item.showExpanded = false;
                    item.editdate = false;
                    item.delayeditclose = true;
                    item.switcheditdate = function (delayclose) {
                        if (!delayclose) {
                            this.editdate = !this.editdate;
                            this.delayeditclose = true;
                        }
                        this.delayeditclose = false;

                    };
                    items.push(item);
           }

我現在轉到上面的內容，它幾乎可以完成任務。 html5日期選擇器的新問題似乎是用斧頭將其關閉。 這隱藏了整個盒子，而不僅僅是選擇器部分。 如果發生這種情況，我想顯示日期的文本，而不是現在得到的內容。 有誰知道我如何捕捉到這個結束事件並恢復為文字，或者提出解決問題的更好方法？

我有很多物品，每個物品在一張桌子的單獨行中

我正在使用角度1.3 beta 8

感謝您尋找安迪

Answer 1

您什么都沒得到的原因是，當您單擊x ，會發生的事情是清除了日期值，因此日期視圖為空字符串。 您可以做的是設置一個條件，以在日期為空時顯示一個字符串，例如“單擊以編輯”。

采取上面的方法，一種方法是在日期“視圖”中添加一個元素和一個標志。 所以改變這個：

Required Date : <span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">{{item.dueDate.toDateString()}}</span>

至：

Required Date : 
<span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">
    <span>{{item.dueDate.toDateString()}}</span>
    <span ng-show="!item.dueDate">Click to Edit</span>
</span>

指示方式

現在，我認為最好為此使用指令。 這將簡化您的邏輯，並且易於重用。 我創建了一個插件 ，使用指令顯示了我的實現。

標題問題的答案

為了回答標題所提出的問題，在使用html5日期選擇器時，您無法檢測到何時關閉（甚至打開）。 請參閱此答案以及有關輸入[type = date]的鏈接的快速常見問題解答。