javascript - 如何处理绑定(bind)到同一 ng-model 的不同输入类型？

Question

在页面中，我有一个用于日期范围选择的部分。我们的很大一部分用户群是 IE 10/11，它不支持输入 type="date"。我使用 Modernizr 根据支持显示/隐藏日期输入，如果不支持，则提供 type="text"的输​​入，两者都绑定(bind)到相同的 ng-model。由于文本和日期不兼容，因此在文本中键入垃圾邮件会导致控制台出现错误。有没有办法修复这个控制台垃圾邮件？使用第三方库不是一个选择。

<div class="col-md-3" data-ng-show="searchBillCreatedDate == 'custom'">
    <label>From</label>
    <input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-show="browser.supportsDateInput">
    <input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-show="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
</div>

Answer 1

将 ng-show 更改为 ng-if，如下所示:

<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-if="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-if="!browser.supportsDateInput" placeholder="yyyy-mm-dd">

您收到错误是因为它绑定(bind)到第一个输入的模型，即日期输入。 ng-show 只是使用 CSS 来隐藏元素，但它仍然存在于 DOM 中。然而，ng-if 完全将其从 DOM 中删除，只留下一个 ng-model="searchFromDate"