Bootstrap 3 Angular 模态弹出窗口不处理移动设备上的触摸事件

Question

Bootstrap3 和 Angular 应该可以很好地配合使用....而且 Bootstrap 是“移动优先”，我从没想过我会遇到这种情况，但我遇到了。

我有一个从按钮弹出的模态窗口（通过标准 modalService），它在我测试过的桌面浏览器（IE 10、11、Edge、Chrome、Opera、Safari 和 Firefox）上运行良好) 但在移动设备上失败。我可以访问的所有手机（IOS Chrome、IOS Safari、Android Internet Browser 和 Android Chrome）。

它在移动浏览器的 Chrome 仿真上也显示相同的故障。

在移动设备上的所有情况下，单选按钮和复选框都无法识别点击/单击事件。除非我长时间按住（比我在文章中看到的 300 毫秒长得多）。在一些确实捕获它的移动浏览器中 - 由更改导致的 Angular 操作不会在移动客户端上执行（而是在桌面上）

<input type="radio" class="form-control"  ng-Model="modalOptions.rScope.selectedItem" name="purchase" ng-value="selectedItem=item" ngClick="modalOptions.rScope.selectedItem=item">

ngTouch 被添加到页面以促进更快的 ngClick 事件。

我删除了所有相关代码并创建了一个 plunk 显示：http://plnkr.co/edit/iZV6JRnHHHRwAKO2JJ06

这是如何定义单选按钮的功能吗？如果是这样，为什么复选框显示相同的行为（我知道它当前没有 ngClick - 但行为是相同的）：

<input type="checkbox" class="form-control" width="20px" ng-model="modalOptions.rScope.xgiftfor" />

我没有收到任何错误，表明 ngTouch 模块没有被加载...

困扰我的一件事...... ngClick 的页面状态：

一个更强大的替代默认 ngClick 设计用于 触摸屏设备。大多数移动浏览器在点击后等待大约 300 毫秒 - 在发送点击事件之前释放。这个版本立即处理它们， 然后阻止下面的点击事件传播。

ngTouch 是否阻止 Angular 继续在表单上传播更新？随着 modalOption.rScope.selectedItem 更新的发生，该点击事件将产生其他后果。

或者我是否正在努力寻找这种行为的原因？

[编辑]

我已更新 plunk 以在主页上显示相同的数据集（代码因范围而略有修改），并且模态上的行为不存在于主页上。在你最喜欢的桌面浏览器中运行它，它在主页上很好 - 但是打开模式，它就不起作用了。

http://embed.plnkr.co/WnxArMU9VUVjDwnvueV1

有没有人知道什么模式引入干扰了处理（以及如何解决它）？

Answer 1

我遇到了确切的问题。不幸的是，我只发现ngClick directive 现在是deprecated，没有解决方法。

弃用通知：从 Angular 1.5 开始，该指令已弃用并且默认禁用。该指令将不会得到进一步的支持，并且可能会从未来的版本中删除。如果您需要该指令，可以使用 $touchProvider#ngClickOverrideEnabled 函数启用它。我们还建议您迁移到FastClick。要了解有关 300 毫秒延迟的更多信息，Telerik article 提供了一个很好的概述。