如何有条件地禁止ngTouch和回退到NG-点击 [英] How to disable ngTouch conditionally and fallback to ng-click

问题描述

我如何使用 ngTouch 不过的选择禁用的它的一些元素呢？也就是说，对于某些元素，我想用原来的 ngClick 指令而不是ngTouch提供了一个。事情是这样的：

 ＆LT;按钮NG点击原创=myClickFn（）＆gt;点击ME＆LT; /按钮＆GT;
 

解决方案

问题是，一旦你包括 ngTouch 模块依赖其版本的ngClick ngTouch.directive（'ngClick将覆盖角度芯原的ngClickDirective。因此，所有的点击将被ngTouch版的<$的处理C $ C> NG-点击所以你需要来装饰你的ngCLick模块来处理你的情况我可以在这里想起几个办法： -

方法1 - 创建自己的指令

如何创建一个 NG-点击原稿可能不与纳克自preFIX它它是一个自定义指令。

  .directive（'ngClickOrig'，['$解析'，函数（$解析）{
      返回{
        编译：函数（$元素，属性）{
          变种FN = $解析（ATTR [ngClickOrig]）;
          返回功能处理器（范围，元素）{
            element.on（'点击'，功能（事件）{
              范围。$应用（函数（）{
                FN（范围，{$事件：事件}）;
              }）;
            }）;
          };
        }
     };
 }]）;
 

演示

---

方法2： - 对于装饰的NG-点击指令

另一种方式创建一个ngClickDirective装饰，查找特定属性的说 notouch 并定期进行点击或使用ngTouch提供的原始之一。

 的.config（函数（$提供）{
   //创建ngClickDirective装饰
   $ provide.decorator（'ngClickDirective'，['$代表，$解析'，函数（$代表，$解析）{
        //获取由ngTouch原编译功能
        变种origValue = $代表[0] .compile（）;
        //获取设置编译器
        $代表[0] = .compile编译器;
        //收益增强ngClick
        返回$代表;       / *编译器实现* /
       函数编译器（榆树，ATTR）{
          //查找notouch属性，如果present返回常规点击事件，
          //没有触摸仿真
          如果（angular.isDefined（attr.notouch））{
            变种FN = $解析（ATTR [ngClick]）;
            返回功能处理器（范围，元素）{
              element.on（'点击'，功能（事件）{
                范围。$应用（函数（）{
                  FN（范围，{$事件：事件}）;
                }）;
              }）;
            }
          }
          //通过ngTouch返回原ngCLick实施
          返回origValue;
         }
   }]）;
}）;
 

正如注释装饰直到该指令将不会执行用于第一次，它将仅运行一次。的

使用示例： -

 ＆LT;按钮NG点击=myClickFn（）notouch＆gt;点击ME＆LT; /按钮＆GT; ＆LT;  - 看到notouch属性 - ＆GT;
   ＆LT;按钮NG点击=myClickFnTouch（）＆gt;点击ME＆LT; /按钮＆GT;
 

演示 - 装饰

How can I use ngTouch but selectively disable it for some elements? That is, for certain elements I'd like to use the original ngClick directive instead of the one that ngTouch provides. Something like this:

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

解决方案

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

这篇关于如何有条件地禁止ngTouch和回退到NG-点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！