角甘特图（错误：plumb.detach 不是函数）答案

【问题标题】：Angular Gantt (error: plumb.detach is not a function)角甘特图（错误：plumb.detach 不是函数）
【发布时间】：2017-09-27 09:15:34
【问题描述】：

在我的应用程序中，我使用了 angular-gantt 组件。当我绘制新的依赖项时出现此错误

angular.js:12808 TypeError: this.manager.plumb.detach is not a function
at Dependency.model.disconnect (http://localhost:9001/bower_components/angular-gantt/assets/angular-gantt-plugins.js:2676:44)
at DependenciesManager.removeDependency (http://localhost:9001/bower_components/angular-gantt/assets/angular-gantt-plugins.js:2321:39)
at DependenciesManager.refresh (http://localhost:9001/bower_components/angular-gantt/assets/angular-gantt-plugins.js:2617:30)
at Object.refresh (http://localhost:9001/bower_components/angular-gantt/assets/angular-gantt.js:4139:35)
at GanttApi.<anonymous> (http://localhost:9001/roadmaps/gantt/roadmapgantt.js:94:24)
at http://localhost:9001/bower_components/angular-gantt/assets/angular-gantt.js:117:33
at Scope.$emit (http://localhost:9001/bower_components/angular/angular.js:16634:33)
at Object.feature.raise.(anonymous function) [as add] (http://localhost:9001/bower_components/angular-gantt/assets/angular-gantt.js:213:42)
at root.jsPlumbInstance.createConnection (http://localhost:9001/bower_components/angular-gantt/assets/angular-gantt-plugins.js:2092:57)
at root.jsPlumbInstance.fire (http://localhost:9001/bower_components/jsplumb/dist/js/jsplumb.js:2884:64)

下面是我使用的数据对象

当我在任务之间绘制依赖关系时显示错误。这里是甘特图选项

$scope.options = {
        columns: [
            'model.taskId', 
            'model.activity', 
            'model.details', 
            'model.comments'
        ],
        columnsHeaders: {
            'model.taskId': 'ID', 
            'model.activity': 'Activity', 
            'model.details': 'Detail', 
            'model.comments': 'Comments'
        },
        columnContents: {
            'model.comments': '<span class="fa fa-comment-o fa-lg" role="button" ng-click="scope.showComments(row.model.tasks)">&nbsp;{{getValue()}}</span>',
            'model.details': '<span class="underline" role="button" ng-click="scope.taskDetails(row.model.tasks)">{{getValue()}}</span>'
        },
        fromDate: moment(null),
        toDate: undefined,
        labelsEnabled: true,
        filterRow: '',
        api: function(api){
            $scope.api = api;

            api.core.on.ready($scope, function(){
                // AL RESIZE O AL MOVE, FACCIO L'UPDATE DEL TASK
                if (api.tasks.on.moveBegin) {
                    api.tasks.on.resizeEnd($scope, addEventName('tasks.on.resize', updateTaskBeginEnd));
                    api.tasks.on.moveEnd($scope, addEventName('tasks.on.move', updateTaskBeginEnd));
                }

                api.dependencies.on.add($scope, function(newData, oldData){
                    api.dependencies.refresh(newData.task);
                });

            });
        }
    };

【问题讨论】：

我也有同样的错误。不知道怎么解决。但由于 gantt-dependencies 插件的默认设置，它会引发。在“js-plumb-defaults”属性中。 ConnectionOverlays：[['箭头'，{位置：1，长度：12，宽度：12}]]

标签： angularjs jsplumb gantt-chart

【解决方案1】：

我为这个问题找到了 2 个解决方案：

将缺少的detach() 函数添加到当前deleteConnection()：

在你的 javscript 上：

$scope.registerApi = function(api) {
    api.core.on.rendered($scope, function(api){
        api.dependencies.on.add($scope, function (dependency) {
            if(!dependency.manager.plumb.detach){
                dependency.manager.plumb.detach = dependency.manager.plumb.deleteConnection;
            }
         });
    });
};

在您的 HTML 上：

<div gantt data="ganttData" api="registerApi">
    <gantt-dependencies enabled="true" read-only="false" conflict-checker="true" js-plumb-defaults="{
            Endpoint: ['Dot', {radius: 4}],
            Connector: 'Flowchart',
            Overlays: [[ 'Arrow', { location: 1, width: 4, length: 8 }]]
        }"></gantt-dependencies>
</div>

或者，您可以使用 2.4.0 之前的 Plumb 版本，例如 2.3.6

我实现了第一个解决方案:)

【讨论】：

【解决方案2】：

我遇到了同样的错误，而且我的模型完全不同。我认为这与 js-plumb-default 无关。

作为一个对我有用的快速而肮脏的修复。

我刚刚注释掉了这一行

this.manager.plumb.detach(this.connection);

在我的实现中，this.connection 对象调用plumb.disconnect 时没有分离函数。

所以这里的文档 - https://jsplumbtoolkit.com/community/doc/removing.html

连接是由用户在通过 makeSource 配置的元素上通过鼠标创建的，该元素没有设置 deleteEndpointsOnDetach:false。

我认为这是 angular-gantt-plugins.js 库的错误。会回来报告的。

【讨论】：

【解决方案3】：

我遇到了同样的问题。这是我修复它的方法，以防万一它对其他人有帮助。
最新版本的 jsPlumb（截至 2018 年 3 月 22 日）是 2.6.9，但在 angular-gantt 项目 GIT repository package.json for the demo version 状态 ^2.3.2 所以我认为它是用于在线演示的版本（即工作正常）。

所以我将 jsPlump 降级到 2.3.2，它不再引发错误。
这是我正在使用的配置：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.3.2/js/jsplumb.min.js"></script>

<gantt-dependencies 
            enabled="true"
            read-only="false"
            js-plumb-defaults="{
                    Endpoint: ['Dot', {radius: 7}],
                    Connector: 'Flowchart'
                }">
</gantt-dependencies>

【讨论】：