角度事件检测，日期选择器关闭

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]的链接的快速常见问题解答。