如何使用ngTouch但有选择地禁用某些元素?也就是说,对于某些元素,我想使用原始ngClick
指令而不是 ngTouch 提供的指令。像这样的东西:
<button ng-click-original="myClickFn()">click me</button>
如何使用ngTouch但有选择地禁用某些元素?也就是说,对于某些元素,我想使用原始ngClick
指令而不是 ngTouch 提供的指令。像这样的东西:
<button ng-click-original="myClickFn()">click me</button>
问题是,一旦您ngTouch
在依赖项中包含模块,其版本ngClick
ngTouch.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});
});
});
};
}
};
}]);
方法 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>