How to disable ngTouch conditionally and fallback to ng-click

Issue is that once you include ngTouch module in the dependency its version of ngClick ngTouch.directive('ngClick' will override the original ngClickDirective of angular core. So all the clicks will be handled by ngTouch's version of ng-click so you would need to decorate the ngCLick in your module to handle your scenario. I can think of couple of approaches here:-

Approach 1 - Create your own directive

How about creating an ng-click-orig probably don't prefix it with ng since it is a custom directive.

.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

Approach 2:- With decorator for ng-Click directive

Another way create a decorator on ngClickDirective, look for specific attribute say notouch and perform regular click or use the original one provided by 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;         }   }]);});

Just as a note decorator will not run until the directive is used for the first time and it will run only once.

Example Usage:-

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

Demo-Decorator