javascript - 日期选择器关闭的 Angular 事件检测

Question

我刚刚开始使用 Angular，并且总体上很喜欢它。我有一个 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 日期选择器似乎有一个 x 来关闭它们。这隐藏了整个盒子，而不仅仅是选择器部分。如果发生这种情况，我想显示日期的文本，而不是我现在得到的内容，这没什么。有谁知道我如何捕获这个关闭事件并恢复到文本或提出更好的解决问题的方法？

我有很多项目，每个项目都在表格中自己的行中

我正在使用 Angular 1.3 beta 8

感谢您的浏览安迪

Answer 1

您没有得到任何结果的原因是，当您单击x时，会发生日期值被清除的情况，因此您的日期 View 是一个空字符串。您可以做的是设置一个条件，以在日期为空时显示字符串，例如“单击以编辑”。

按照上面的内容，一种方法是在日期“ View ”中添加一个元素和一个标志。所以改变这个:

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>

指令方式

现在，在我看来，我认为为此使用指令要好得多。它将简化您的逻辑并且更容易重用。我创建了一个plunker这显示了我使用指令的实现。

回答标题中的问题

为了回答你的标题提出的问题，当使用html5日期选择器时，你无法检测到它何时关闭(甚至何时打开)。请参阅this answer和链接的 Quick FAQs on input[type=date]