您的位置：首页 > Web前端 > AngularJS

angularjs 自定义右键菜单

2014-03-12 23:02 162 查看

/*

调用：
在要右键点击的元素上添加contextMenu属性即可
*/
var app = angular.module('app', [])
app.directive('contextMenu', ['$window', function($window) {
return {
restrict: 'A',
//require:'^?ngModel',
link: function($scope, element, attrs) {
var opened = false;
varmenuElement = angular.element(document.getElementById(attrs.target));
function open(event, element) {
$scope.opened = true;
menuElement.css('top', event.clientY + 'px');
menuElement.css('left', event.clientX + 'px');
};
function close(element) {
$scope.opened = false;
};

$scope.opened = false;

//每个项点击的事件
$scope.fns = {
"查看":function($event){
alert('LOOK');
},
"刷新":function($event){
alert('刷新')
}
,
"点击":function($event){
alert('点击')
}
}
//模拟数据填充菜单数据可通以点击元素过属性传递过来
//菜单的html 结构
//<ul id='a'><li ng-repeat='m in ms'>{{m.name}}</li></ul>
$scope.ms = $scope.model;
$scope.fn = function($event,sName){
/*
* 根据sName 来判断使用什么函数
*/

$scope.fns[sName]($event);
}
//显示右键菜单
element.bind('contextmenu', function(event) {
$scope.$apply(function() {
event.preventDefault();
open(event, menuElement);
});
});

//窗口绑定点击事件隐藏右键菜单
angular.element($window).bind('click', function(event) {
if (opened) {
$scope.$apply(function() {
event.preventDefault();
close(menuElement);
});
}
});
}
};
}]);

//html

<body ng-app='app'>
<div context-menu
target='a'
ng-init='model=[{name:"查看"},{name:"刷新"},{name:"点击"}]'>hello</div>

<ul id='a' ng-show='opened'>
<li ng-repeat='m in ms' ng-click='fn($event,m.name)'>{{m.name}}</li>
</ul>
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/app.js"></script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航