3

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

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

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

我的代码: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>

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

谢谢!

4

4 回答 4

3

对于仍然遇到此问题的任何人,这可能会有所帮助:JS:event.touches 属性如何工作? “听起来 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 行)

于 2014-10-05T06:07:43.997 回答
1

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

于 2013-10-22T19:22:56.490 回答
0

使用上述 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];
于 2014-11-19T15:52:39.330 回答
0

你也可以试试ng-slider

它允许触摸设备单击切换而不是拖动(这在触摸设备上非常困难)。

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

于 2015-01-29T22:26:28.697 回答