zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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();         });       }     }   }])