Angular Gantt（错误：plumb.detach不是函数）

Question

在我的应用程序中，我使用了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);
                });

            });
        }
    };

Answer 1

我找到了2个解决此问题的方法：

1. 将缺少的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. 或者，您可以使用2.4.0之前的Plumb版本，如2.3.6

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

Answer 2

我也有同样的错误。不知道该怎么解决。但它因gantt-dependencies插件的默认设置而上升。

在'js-plumb-defaults'属性中。 ConnectionOverlays：[['箭头'，{位置：1，长度：12，宽度：12}]]

Answer 3

我得到了同样的错误，我的模型完全不同。我不认为它与js-plumb-default有任何关系。

作为一个快速而肮脏的解决方案，对我有用。

我刚刚评论过这一行

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

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

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

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

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

Answer 4

我遇到了同样的问题。以下是我修复它的方法，以防它帮助别人。 最新版本的jsPlumb（截至2018-03-22）是2.6.9，但在角度甘特图项目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>