Angular Slider Touch 不适用于指令答案

【问题标题】：Angular Slider Touch not working with directiveAngular Slider Touch 不适用于指令
【发布时间】：2013-10-22 11:20:17
【问题描述】：

我在我的应用程序中使用以下指令

https://github.com/prajwalkman/angular-slider

当我尝试在屏幕上拖动滑块时，除了触控支持之外，一切正常。 Touch 适用于给出的示例，但不适用于我的应用程序。我已经检查过我使用的是相同版本的 angular 等。

我的代码： filter.js（控制器）

$scope.lower_price_bound = 50;
$scope.upper_price_bound = 3000;

html

<slider floor="10" ceiling="3000" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider>

是否需要添加任何内容才能获得对移动设备的触控支持？

谢谢！

【问题讨论】：

标签： javascript angularjs touch angularjs-directive uislider

【解决方案1】：

对于仍然遇到此问题的任何人，这可能会有所帮助：JS: How does event.touches property work?“听起来 jQuery 没有在其自定义事件对象中传递 touches 属性。”

这为我解决了问题。改变这个：

onMove = function (event) {
              var eventX, newOffset, newPercent, newValue;
              eventX = event.clientX || event.touches[0].clientX;
              ...

到

 onMove = function () {
              var eventX, newOffset, newPercent, newValue;
              eventX = event.clientX || event.touches[0].clientX;
              ...

（我的 angular-slider.js 版本的第 227 行）

【讨论】：

谢谢！我不明白你为什么省略“var”？
Delos，在下面查看我的答案以获得 Firefox 解决方案。

【解决方案2】：

从滑块指令的代码看来，您似乎不需要做任何特别的事情来支持触摸事件。我用您提供的代码组装了一个 plunker here，一切都按预期工作。我已经在我的 Sony xperia 手机上使用 chrome 对其进行了测试。

【讨论】：

感谢您的回复。您提供的示例也适用于我的手机。我得出的结论是我的应用程序与触摸支持发生了某种冲突。我正在使用 MEAN 堆栈，我什至创建了一个只有一个滑块的应用程序，但我仍然没有获得触摸支持 - 指针在触摸时会突出显示，但没有拖动。
这里是否有 jquery/另一个库可能导致冲突？
我能想到的两个常见冲突。 1/您的页面上有溢出，浏览器无法判断您是要移动页面还是开始滑块拖动（尝试将 css overflow:hidden 放在 body 标记上）。 2/ 在代码的某处，touchmove 上有一个事件处理程序，用于停止 dom 事件的传播。但是这个会更难发现。
再次感谢。我终于找到了导致问题的原因。出于某种原因，如果我在滑块之前加载 jquery，则会发生冲突。在滑块之后加载它，它工作正常。感谢您的帮助。
在滑块之后加载它意味着您正在使用带有角度的 jqLite 作为角度滑块，这会导致其他问题。

【解决方案3】：

使用上述 Ryan 的修复程序，我设法让我的滑块按预期工作。然而，正如 cmets 中所提到的，它也确实打破了我的 Firefox。为了修复 Firefox 问题，在 angular-slider.js 中还需要进行以下更改：

第 79 行：

变化：

sliderDirective = function($timeout) {

通过添加$window 参数：

sliderDirective = function($timeout, $window) {

第 227 行：

变化：

onMove = function () {
    var eventX, newOffset, newPercent, newValue;
    eventX = event.clientX || event.touches[0].clientX;
    ...

通过将customEvent 参数添加到onMove() 函数并分配您自己的event 变量（myEvent）：

onMove = function(customEvent) {
    var eventX, newOffset, newPercent, newValue,
        myEvent = $window.event || customEvent;

    eventX = myEvent.clientX || myEvent.touches[0].clientX;
    ...

这样，该函数将使用原生的window.event 变量（存在于 Firefox 中）或库提供的变量。

第 317 行：
最后，通过更改来更新依赖声明：

qualifiedDirectiveDefinition = ['$timeout', sliderDirective];

包括$window

qualifiedDirectiveDefinition = ['$timeout', '$window', sliderDirective];

【讨论】：

【解决方案4】：

你也可以试试ng-slider

它允许触摸设备点击切换而不是拖动（这在触摸设备上非常困难）。

它还提供了更多的功能和配置。

【讨论】：