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

最新推荐文章于 2022-11-03 13:58:17 发布

原创最新推荐文章于 2022-11-03 13:58:17 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

70 篇文章

订阅专栏

本文介绍如何在Angular中使用directive实现鼠标右键点击事件，并通过$parse服务解析属性值，实现更灵活的事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常规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属性也是一个函数，它可以用来在给定的上下文中改变这个表达式的值。

下面是一段简单的代码：

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

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