天天看点

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

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

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

下面是一段简单的代码:

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

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

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

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]即可。但是在上面的例子中,方括号并不管用。

 返回上一页

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

//返回上一页 window.history.back()  

.directive('backbutton', ['$window', function($window) {  

  return {  

    restrict: 'a',  

    link: function(scope, element, attrs) {  

      element.bind('click', function() {  

        $window.history.back();  

      });  

    }  

}])