Question

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

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

当我试图在屏幕上拖动滑块时，除了触摸支持之外，它们都正常工作。 Touch适用于给出的示例，但不适用于我的应用程序。我已经检查过我正在使用相同版本的角度等。

我的代码： filter.js（Controller）

$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>

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

谢谢！

Answer 1

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

这为我修好了。改变这个：

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行）

Answer 2

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

Answer 3

使用上面的Ryan修复程序，我设法让我的滑块按预期工作。然而，正如评论中所提到的，它确实也让我破坏了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];

Answer 4

您还可以尝试 ng-slider

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

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

Angular Slider Touch无法使用指令

4 个答案: