как включить ионные события с несколькими касаниями

Я разрабатываю простое ионное приложение, а часть приложения требует нажатия двух кнопок одновременно. Я построил эту логику так:как включить ионные события с несколькими касаниями

<!--yT stands for yourThumb, pT stands for partnersThumb --> 


<a class="icon ion-qr-scanner lg-txt" on-hold="Global.thumbHoldManager('yT',true)" on-release="Global.thumbHoldManager('yT',false, true)"></a> 

<a class="icon ion-qr-scanner lg-txt" on-hold="Global.thumbHoldManager('pT',true)" on-release="Global.thumbHoldManager('pT',false, true)"></a>

У меня есть метод на мой контроллер, который обрабатывает это событие с помощью службы Я создал

var globalCtrl = function (clickHandler, $timeout) { 
    var self = this; 
    this.clickHandler = clickHandler; 
    this.timeout = $timeout; 
    this.readyState = clickHandler.ready; 
    this.showInstruction = false; 

    clickHandler.watchForReady(); 

}; 

globalCtrl.prototype.thumbHoldManager = function(which, what, up) { 
    this.clickHandler.setClickState(which, what); 
    var self = this; 

    if (up) { 
     this.clickHandler.stopWatching(); 
    } 

    if (!this.readyState) { 
     this.instruction = "Hold both thumbs in place to scan" 
     if (!this.showInstruction) { 
       this.showInstruction = true; 
       self.timeout(function() { 
       self.showInstruction = false; 
      }, 5000) 
     } 
    } 
}; 

globalCtrl.$inject = ['clickHandler', '$timeout'];

clickHandler служба выставляет апи к частной объект, задача которого он должен отслеживать при нажатии кнопки, и когда обе кнопки нажаты для перехода к новому URL-адресу.

.factory('clickHandler', [ 
    '$interval', 
    '$rootScope', 
    '$location', 
    function($interval, $rootScope, $location) { 

    // Service logic 
    // ... 

     var clickState = { 
      yT: false, 
      pT: false, 
      ready: false, 
      watching: false, 
      watcher: false 
     }; 

    // Public API here 

     return { 
      setClickState: function(which, what) { 
       clickState[which] = what; 
      }, 

      getClickState: function(which) { 
       return clickState[which] 
      }, 

      getReadyState: function() { 
       return ((clickState.yT) && (clickState.pT)); 
      }, 

      watchForReady: function() { 
       var self = this; 
       clickState.watching = $interval(function() { 
        clickState.ready = self.getReadyState(); 
       },50); 

       clickState.watcher = $rootScope.$watch(function() { 
        return clickState.ready 
       }, function redirect(newValue) { 
        if (newValue) { 
         self.stopWatching(); 
         $location.path('/scan'); 
        } 
       }) 
      }, 

      stopWatching: function() { 
       if (clickState.watching) { 
        $interval.cancel(clickState.watching); 
        clickState.watcher(); 
        clickState.watching = false; 
        clickState.watcher = false; 

       } 
      } 

     }; 
    } 
])

Я не получаю никаких ошибок с этим кодом, все работает, как положено, наблюдатель регистрируется на событие удержания и незарегистрированные на событие выпуска. Но независимо от того, что я делаю, я не могу заставить телефон обнаруживать нажатие на обе кнопки. Это всегда одно или другое, и я не знаю, почему. Я не могу проверить это в браузере или эмуляторе, так как multi-touch не поддерживается, и если у вас нет трекпада с несколькими касаниями.

источник

2015-03-06 richbai90

Возможный дубликат http://stackoverflow.com/questions/28770819/ionic-framework-how-to-detect-simultaneous-tap-gesture-with-two- finger-in-and – richbai90

ну, ответа пока нет, я уже разместил вопрос на ионных форумах и до сих пор не мог получить ответ. Позвольте мне поиграть с этим подробнее ... –

Вот как я реализовал свою собственную директиву и услуги, чтобы сделать это:

.factory('clickHandler', ['$interval', '$rootScope', '$location', '$document', function ($interval, $rootScope, $location, $document) { 
// Service logic 
// ... 

$document = $document[0]; 



var 
    touchStart, 
    touchEnd; 

touchStart = ('ontouchstart' in $document.documentElement) ? 'touchstart' : 'mousedown'; 
touchEnd = ('ontouchend' in $document.documentElement) ? 'touchend' : 'mouseup'; 

var clickState = { 
    yT:   false, 
    pT:   false, 
    ready:  false, 
    watching: false, 
    watcher: false, 
    startEvent: touchStart, 
    endEvent: touchEnd 
}; 

// Public API here 
return { 
    setClickState: function (which, what) { 
    clickState[which] = what; 
    }, 

    getClickState: function (which) { 
    return clickState[which] 
    }, 

    getReadyState: function() { 
    return ((clickState.yT) && (clickState.pT)); 
    }, 

    watchForReady: function() { 
    var self = this; 

    //prevent multiple redundant watchers 

    if (clickState.watching) { 
     return; 
    } 

    clickState.watching = $interval(function() { 
     clickState.ready = self.getReadyState(); 
    }, 50); 

    clickState.watcher = $rootScope.$watch(function() { 
     return clickState.ready 
    }, function redirect(newValue) { 
     if (newValue) { 
     self.stopWatching(); 
     $location.path('/scan'); 
     } 
    }) 
    }, 

    stopWatching: function() { 
    if (clickState.watching) { 
     $interval.cancel(clickState.watching); 
     clickState.watcher(); 
     clickState.watching = false; 
     clickState.watcher = false; 

    } 
    }, 

    getTouchEvents: function() { 
    return { 
     start: clickState.startEvent, 
     end: clickState.endEvent 
    } 
    } 




    }; 
}]) 

.directive('simultaneousTouch', ['clickHandler', '$document', function (clickHandler) { 
    return { 
    restrict: 'A', 
    link:  function (scope, elem, attr) { 
     var touchEvents = clickHandler.getTouchEvents(); 

     elem.on(touchEvents.start, function() { 

     clickHandler.watchForReady(); 
     clickHandler.setClickState(attr.simultaneousTouch, true); 
     }); 

     elem.on(touchEvents.end, function() { 
     clickHandler.stopWatching(); 
     clickHandler.setClickState(attr.simultaneousTouch, false); 
     }) 
    } 
    } 
}]);

источник

2015-03-09 14:55:16 richbai90

КРОССПОСТИНГ ответ stankugo от ионных форумов ради ссылки. Простым решением, приведенным ниже, является его идея, я только что немного почистил.

angular.module('xxxx').directive('multitouch', function() { 
    return function(scope, element, attr) { 
     element.on('touchstart', function() { 
      scope.$apply(function() { 
       scope.$eval(attr.multitouch); 
      }); 
     }); 
    }; 
});

Используйте как:

<div multitouch="handler()"></div>

источник

2015-04-16 09:18:27

как включить ионные события с несколькими касаниями

ответ

Смежные вопросы