AngularJS实现鼠标右键事件 事件冒泡

常规JavaScript鼠标右键直接在标签上加contextmenu="alert('a')"即可,现在angular通过directive来定义一个右键指令。

Java代码  AngularJS实现鼠标右键事件 事件冒泡
  1. app.directive('ngRightClick', function($parse) {  
  2.     return function(scope, element, attrs) {  
  3.         var fn = $parse(attrs.ngRightClick);  
  4.         element.bind('contextmenu', function(event) {  
  5.             scope.$apply(function() {  
  6.                 event.preventDefault();  
  7.                 fn(scope, {$event:event});  
  8.             });  
  9.         });  
  10.     };  
  11. });  

$parse服务可以讲一个表达式转换为一个函数。这个函数可以被调用,其中的参数是一个上下文对象,通常来说是作用域。另外,通过$parse的表达式返回的这个函数有一个assign属性。这个assign属性也是一个函数,它可以用来在给定的上下文中改变这个表达式的值。

下面是一段简单的代码:

Java代码  AngularJS实现鼠标右键事件 事件冒泡
  1. <div my-attr="obj.name" my-directive>testing</div>   
Java代码  AngularJS实现鼠标右键事件 事件冒泡
  1. app.directive('myDirective',function($log,$parse){  
  2.   return function(scope,elem,attrs){  
  3.     //解析"my-attr属性值到一个函数中"  
  4.     var model = $parse(attrs.myAttr);  
  5.     //model现在是一个函数,可以调用它来获取表达式的值  
  6.     //下面这行代码将会输出作用域中obj.name的值    
  7.     $log.log(model(scope));  
  8.   
  9.     elem.bind('click',function(){  
  10.       //'model.assign'也是一个函数,它用来更新表达式的值    
  11.       model.assign(scope,'New name');  
  12.       scope.$apply();  
  13.     })  
  14.   }  
  15. });  

上面的例子可以充分体现我们为什么需要$parse服务。如果属性值是name,那么我们完全可以不用$parse,只用scope[attrs.myAttr]即可。但是在上面的例子中,方括号并不管用。

 

 返回上一页
Java代码  AngularJS实现鼠标右键事件 事件冒泡
  1. //返回上一页 window.history.back()  
  2. .directive('backButton', ['$window', function($window) {  
  3.   return {  
  4.     restrict: 'A',  
  5.     link: function(scope, element, attrs) {  
  6.       element.bind('click', function() {  
  7.         $window.history.back();  
  8.       });  
  9.     }  
  10.   }  
  11. }])  
 
 
上一篇:rsync 服务与配置文档


下一篇:手动制作python的exe可执行程序 -- by Leo Jay