AngularJS实现鼠标右键事件 事件冒泡
事件 实现 鼠标 angularjs 右键 冒泡
2023-09-14 08:59:49 时间
常规JavaScript鼠标右键直接在标签上加contextmenu="alert(a)"即可,现在angular通过directive来定义一个右键指令。
app.directive(ngRightClick, function($parse) { return function(scope, element, attrs) { var fn = $parse(attrs.ngRightClick); element.bind(contextmenu, function(event) { scope.$apply(function() { event.preventDefault(); fn(scope, {$event:event}); }); }); }; });
$parse服务可以讲一个表达式转换为一个函数。这个函数可以被调用,其中的参数是一个上下文对象,通常来说是作用域。另外,通过$parse的表达式返回的这个函数有一个assign属性。这个assign属性也是一个函数,它可以用来在给定的上下文中改变这个表达式的值。
下面是一段简单的代码:
app.directive(myDirective,function($log,$parse){ return function(scope,elem,attrs){ //解析"my-attr属性值到一个函数中" var model = $parse(attrs.myAttr); //model现在是一个函数,可以调用它来获取表达式的值 //下面这行代码将会输出作用域中obj.name的值 $log.log(model(scope)); elem.bind(click,function(){ //model.assign也是一个函数,它用来更新表达式的值 model.assign(scope,New name); scope.$apply(); }) } });
上面的例子可以充分体现我们为什么需要$parse服务。如果属性值是name,那么我们完全可以不用$parse,只用scope[attrs.myAttr]即可。但是在上面的例子中,方括号并不管用。
返回上一页
//返回上一页 window.history.back() .directive(backButton, [$window, function($window) { return { restrict: A, link: function(scope, element, attrs) { element.bind(click, function() { $window.history.back(); }); } } }])
相关文章
- Android开发之PullToRefresh的Click点击事件的监听实现长按删除Item
- Ngui 五种点击事件实现方式及在3d场景中点透的情况
- kernel事件通知userspace
- android图片透明度跟缩放大小动画事件
- IOS之UI--自定义按钮实现代理监听点击事件
- Java GUI 窗体事件
- 监听浏览器返回事件
- Asp.net(C#) windows 服务{用于实现计划任务,事件监控等}
- 浏览器事件机制与自定义事件的实现
- reactjs onClick绑定点击事件的正确写法
- JavaScript 异步执行的学习笔记 - 什么是事件循环 Event loop?
- js实现浏览器窗口大小被改变时触发事件的方法
- Qt QChart 自定义qChartView(重写鼠标事件)完美实现缩放与平移(新增android下手势缩放实现)
- 【项目实战】Python基于BP神经网络算法实现家用热水器用户行为分析与事件识别
- PHP实现事件机制实例分析
- JavaScript实现禁用键盘和鼠标的点击事件
- Android 屏幕实现水龙头事件
- 实现现下列哪一种接口的对象,并不需要在web.xml文件内进行额外的设定,Servlet容器就能够回应该对象加入HTTP会话所发生的事件?(选择1项)
- HTML 事件的例子:
- pygame学习笔记(3)——时间、事件、文字
- js 回车触发点击事件
- 如何在 Kitten 里绘制两个相邻的正方体并响应用户输入事件
- Android studio之Button点击事件的四种实现方法