如何使用 ngTouch 但有选择地禁用某些元素?也就是说,对于某些元素,我想使用原始的 ngClick 指令而不是 ngTouch 提供的指令。像这样的东西:

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

最佳答案

问题是,一旦您在依赖项中包含 ngTouch 模块,其 ngClick ngTouch.directive('ngClick' 版本将覆盖 angular 核心的原始 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:- 使用 ng-Click 指令的装饰器

另一种方法是在 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

关于javascript - 如何有条件地禁用 ngTouch 并回退到 ng-click,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26147584/

10-11 23:34