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

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

Java代码  

  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代码  

  1. <div my-attr="obj.name" my-directive>testing</div>   

Java代码  

  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代码  

  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. }])  

 

 

时间: 2016-05-12

AngularJS实现鼠标右键事件 事件冒泡的相关文章

javascript实现在某个元素上阻止鼠标右键事件的方法和实例_javascript技巧

最近在做一个小东西的时候需要在某一个元素上"右击"触发一个自定义菜单,通过自定义的菜单对右击的条目进行编辑.这就要求屏蔽默认的右键菜单 IE和FF下面的元素都有oncontextmenu这个方法,在FF下面只要通过event.preventDefault()方法就可以轻松实现这个效果.IE并不支持这个方法,在IE下面一般是通过触发方法后return false来实现阻止默认事件的. 通常我们使用阻止右键事件是在全局阻止,即在document层面就将右键拦截,现在我想要实现的效果是只在特

在flex中监听鼠标右键事件,提示 TypeError Error 2007 参数type不能为空。

在flex中监听鼠标右键事件 ,报错,提示 缺少参数. TypeError: Error 2007: 参数 type 不能为空. at flash.events::EventDispatcher/addEventListener() at com.waylau.eagleos.components::DesktopExplorer/service_resultHandler()[D:\workspaceFB47\com.waylau.eagleos_0.9.5\src\com\waylau\ea

鼠标右键-c# tabcontrol 的tabpage 页添加右键事件

问题描述 c# tabcontrol 的tabpage 页添加右键事件 如题 tabcontrol 的tabpage页添加鼠标右键事件,在网上也看到了 一些帖子 感觉没有理解意思 在这请教一下大神喽 望赐教 解决方案 在你的tabcontrol控件中处理mouseup事件,判断e.Button是不是右键,如果是,就执行你的逻辑

jquery事件机制扩展插件 jquery鼠标右键事件。_jquery

jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用. jQuery的插件主要分3种类型 1.封装对象方法的插件 (这种

jquery事件机制扩展插件 jquery鼠标右键事件_jquery

因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直

JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例_javascript技巧

JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例 document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('box'); //找到id为box的div document.body.onmouseup = function(e){ //在body里点击触发事件 if(e.button===2){ //如果button=1(鼠标左键),butto

浅谈Javascript鼠标和滚轮事件_javascript技巧

a)鼠标事件 鼠标事件也许是web页面当中最常用到的事件,因为鼠标是最常用的导航设备,在DOM3级事件上定义了9个鼠标事件,分别为: click:当用户点击鼠标主键通常是指鼠标左键或按回车键时触发. dbclick:当用户双击鼠标主键时发生触发,这个事件并没有在DOM2级事件中定义但是却被普遍支持了,后来在DOM3级中得到了标准化. mousedown:当用户按下鼠标任意一个键都会触发,这个事件是不能够通过键盘触发的. mouseenter:当鼠标图标从元素外移动至元素边界内时触发.该事件不支持

JavaScript事件类型中焦点、鼠标和滚轮事件详解_javascript技巧

本文针对JavaScript 事件中"事件类型"下"焦点.鼠标和滚轮事件"的注意要点进行整理,分享给大家供大家参考,具体内容如下 一.焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin: DOMFocusOut:同HTML事件blur,于DOM3遭废弃,选用foc

总结Selenium WebDriver中一些鼠标和键盘事件的使用

在使用 Selenium WebDriver 做自动化测试的时候,会经常模拟鼠标和键盘的一些行为.比如使用鼠标单击.双击.右击.拖拽等动作:或者键盘输入.快捷键使用.组合键使用等模拟键盘的操作.在 WebDeriver 中,有一个专门的类来负责实现这些测试场景,那就是 Actions 类,在使用该类的过程中会配合使用到 Keys 枚举以及 Mouse. Keyboard.CompositeAction 等类. 其次,在实际测试过程中,可能会遇到某些按键没办法使用 Actions.Keys 等类来