Angular 甘特图如何为任务添加上下文菜单，如下图 
我当前的任务是这样的
我已经在 html 中包含了 javascript ans css 文件，如下所示
<link rel="stylesheet" href="bower_components/angular-gantt/dist/angular-gantt.min.css"/>
<link rel="stylesheet" href="bower_components/angular-gantt/dist/angular-gantt-plugins.min.css"/>
<script src="bower_components/angular-gantt/dist/angular-gantt.min.js"></script>
<script src="bower_components/angular-gantt/dist/angular-gantt-plugins.min.js"></script>
代码: html:
<div gantt data="data" api="registerApi">
<gantt-table enabled="true" headers="columnsHeaders">
</gantt-table>
<gantt-groups></gantt-groups>
<gantt-tooltips></gantt-tooltips>
<gantt-bounds></gantt-bounds>
<gantt-progress></gantt-progress>
<gantt-sortable></gantt-sortable>
<gantt-movable ></gantt-movable>
<gantt-draw-task ></gantt-draw-task>
<gantt-resize-sensor ></gantt-resize-sensor>
<gantt-overlap></gantt-overlap>
</div>
</div>
Controller :
app.controller('historyController',function($scope,$http){
$scope.registerApi = function(api) {
api.core.on.ready($scope, function () {
api.tasks.on.resizeEnd($scope, function(data) {
console.log(data.model.name);
console.log(data.model.from);
console.log(data.model.to);
});
});
api.directives.on.new($scope, function(dName, dScope, dElement, dAttrs, dController) {
console.log(dName)
console.log(dScope);
console.log(dElement);
console.log(dAttrs);
console.log(dController);
});
}
$scope.scale="day";
$scope.data = [{name: 'Milestones', height: '3em', sortable: false, classes: 'gantt-row-milestone', color: '#45607D', tasks: [
// Dates can be specified as string, timestamp or javascript date object. The data attribute can be used to attach a custom object
{name: 'Kickoff', color: '#93C47D', from: '2013-10-07T09:00:00', to: '2013-10-07T10:00:00', data: 'Can contain any custom data or object'},
{name: 'Concept approval', color: '#93C47D', from: new Date(2013, 9, 18, 18, 0, 0), to: new Date(2013, 9, 18, 18, 0, 0), est: new Date(2013, 9, 16, 7, 0, 0), lct: new Date(2013, 9, 19, 0, 0, 0)},
{name: 'Development finished', color: '#93C47D', from: new Date(2013, 10, 15, 18, 0, 0), to: new Date(2013, 10, 15, 18, 0, 0)},
{name: 'Shop is running', color: '#93C47D', from: new Date(2013, 10, 22, 12, 0, 0), to: new Date(2013, 10, 22, 12, 0, 0)},
{name: 'Go-live', color: '#93C47D', from: new Date(2013, 10, 29, 16, 0, 0), to: new Date(2013, 10, 29, 16, 0, 0)}
], data: 'Can contain any custom data or object'},
{name: 'Status meetings', tasks: [
{name: 'Demo #1', color: '#9FC5F8', from: new Date(2013, 9, 25, 15, 0, 0), to: new Date(2013, 9, 25, 18, 30, 0)},
{name: 'Demo #2', color: '#9FC5F8', from: new Date(2013, 10, 1, 15, 0, 0), to: new Date(2013, 10, 1, 18, 0, 0)},
{name: 'Demo #3', color: '#9FC5F8', from: new Date(2013, 10, 8, 15, 0, 0), to: new Date(2013, 10, 8, 18, 0, 0)},
{name: 'Demo #4', color: '#9FC5F8', from: new Date(2013, 10, 15, 15, 0, 0), to: new Date(2013, 10, 15, 18, 0, 0)},
{name: 'Demo #5', color: '#9FC5F8', from: new Date(2013, 10, 24, 9, 0, 0), to: new Date(2013, 10, 24, 10, 0, 0)}
]]
我是 Angular 新手。
最佳答案
<div class="dashboard-file-folder-items" style="height:50px; width:50px; background:red;">Right Click</div>
一旦我使用 JQueryi 完成我的项目，希望这对您有帮助
<script>
$(document).bind("click", function (event) {
if ($(event.target).closest('.dashboard-file-folder-items').length > 0) {
return true;
} else {
$("div.custom-menu").hide();
$(".dropdown-menu").slideUp();
$(".dashboard-file-folder-items").css("border-color", "");
$(".dashboard-file-folder-items div").css({"background-color": "", "color": ""});
$(".folder-action-menu").addClass("menudisabled");
$(".folder-action-menu").removeAttr("data-toggle");
}
});
$(".dashboard-file-folder-items").bind("contextmenu", function (event) {
event.preventDefault();
$("div.custom-menu").hide();
$(".dropdown-menu").slideUp();
var html = ' <ul class="dropdown-menu" style="display:block;">';
html += '<li>';
html += '<a href="#"><i class="icon icon-lg icon-share menu-icon"></i> Share</a>';
html += '</li>';
html += ' <li>';
html += ' <a href="#"><i class="icon icon-lg icon-link menu-icon"></i> Copy Link</a>';
html += ' </li>';
html += ' <li>';
html += ' <a href="#"><i class="icon icon-lg icon-folder-o menu-icon"></i> Move to</a>';
html += ' </li>';
html += ' <li>';
html += ' <a href="#"><i class="icon icon-lg icon-star-o menu-icon"></i> Favorite</a>';
html += ' </li>';
html += ' <li>';
html += ' <a href="#"><i class="icon icon-lg icon-pencil menu-icon"></i> Rename</a>';
html += ' </li>';
html += ' <li>';
html += ' <a href="#"><i class="icon icon-lg icon-file-o menu-icon"></i> Make a copy</a>';
html += ' </li>';
html += ' <li>';
html += ' <a href="#"><i class="icon icon-lg icon-download menu-icon"></i> Downlaod</a>';
html += ' </li>';
html += ' <li role="separator" class="divider"></li>';
html += ' <li>';
html += ' <a href="#"><i class="icon icon-lg icon-trash menu-icon menu-icon-remove"></i> Remove</a>';
html += ' </li>';
html += ' </ul> ';
$("<div class='custom-menu'>" + html + "</div>")
.appendTo("body")
.css({top: event.pageY + "px", left: event.pageX + "px"});
$(".dashboard-file-folder-items").css("border-color", "");
$(".dashboard-file-folder-items div").css({"background-color": "", "color": ""});
$(this).css("border-color", "#ff2828");
$(this).children("div").css({"background-color": "#ff2828", "color": "white"});
$(".folder-action-menu").removeClass("menudisabled");
$(".folder-action-menu").attr("data-toggle", "dropdown");
});
</script>
关于javascript - 如何在甘特图中添加上下文菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43633113/