How to disable ngTouch conditionally and cancel for ng-click

Question

How can I use ngTouch but selectively disable it for some elements? That is, for some elements, I would like to use the original directive ngClickinstead of the one provided by ngTouch. Something like that:

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

Answer 1

The problem is that after you enable the module ngTouchin the dependencies, its version will ngClick ngTouch.directive('ngClick'override the original ngClickDirective angular kernel. This way, all clicks will be processed by the ngTouch version ng-click, so you will need to decorate ngCLick in your module to process your script. I can come up with a couple of approaches here: -

Approach 1 - Create your own directive

How about creating it ng-click-orig, probably not prefixing 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 a decorator for the ng-Click directive

Another way to create a decorator on ngClickDirective is to find a specific say attribute notouchand perform a normal click or use the original 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;
         }
   }]);
});

, , , .

: -

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

Demo-Decorator