Как отключить ngTouch условно и отложить на ng-click

Question

Как использовать ngTouch, но выборочно отключить это для некоторых элементов? То есть для некоторых элементов я бы хотел использовать оригинальную директиву ngClick вместо той, которую предоставляет ngTouch. Что-то вроде этого:

<button ng-click-original="myClickFn()">click me</button> 

Answer 1

Проблема в том, что, как только вы включаете ngTouch модуль в зависимости его версия ngClickngTouch.directive('ngClick' заменит оригинальный ngClickDirective угловой сердечника. Таким образом, все клики будут обрабатываться версией ngTouch ng-click, поэтому вам нужно будет украсить ngCLick в своем модуле для обработки вашего сценария. Я могу думать о двух подходах здесь: -

Подход 1 - Создайте собственную директива

Как о создании ng-click-orig, вероятно, не префикса с ng, поскольку это обычаем директива.

.directive('ngClickOrig', ['$parse', function($parse) { 
     return { 
     compile: function($element, attr) { 
      var fn = $parse(attr["ngClickOrig"]); 
      return function handler(scope, element) { 
      element.on('click', function(event) { 
       scope.$apply(function() { 
       fn(scope, {$event:event}); 
       }); 
      }); 
      }; 
     } 
    }; 
}]); 

Demo

---

подход 2: - С декоратора для нг-Клик директивы

Другим способом создать декоратор на ngClickDirective, искать конкретный атрибут сказать notouch и выполнять обычный щелчок или использование оригинала, предоставленного ngTouch.

.config(function($provide){ 
    //Create a decoration for ngClickDirective 
    $provide.decorator('ngClickDirective', ['$delegate','$parse', function($delegate, $parse) { 
     //Get the original compile function by ngTouch 
     var origValue = $delegate[0].compile(); 
     //Get set the compiler 
     $delegate[0].compile = compiler; 
     //return augmented ngClick 
     return $delegate; 

     /*Compiler Implementation*/ 
     function compiler(elm, attr){ 
      //Look for "notouch" attribute, if present return regular click event, 
      //no touch simulation 
      if(angular.isDefined(attr.notouch)){ 
      var fn = $parse(attr["ngClick"]); 
      return function handler(scope, element) { 
       element.on('click', function(event) { 
       scope.$apply(function() { 
        fn(scope, {$event:event}); 
       }); 
       }); 
      } 
      } 
      //return original ngCLick implementation by ngTouch 
      return origValue; 
     } 
    }]); 
}); 

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

Пример использования: -

<button ng-click="myClickFn()" notouch>click me</button> <-- see notouch attribute --> 
    <button ng-click="myClickFnTouch()">click me</button> 

Demo-Decorator