Question

我无法让JSPlumb与Angular一起玩。在我的指令链接函数中，我想启用拖动新元素。

angular.module('myApp').directive('knEditorNode',function() { 
[...]
return {
  restrict: 'E',
  replace: true,
  scope: {
    nodeId: '@'
  },
  template: '<div id="{{nodeId}}" class="knNode">Loading ...</div>',

  link: function(scope, element) {
    var nodeModel = service.getNodeModel(scope.nodeId);
    angular.element(element).css('top', nodeModel.top);
    angular.element(element).css('left', nodeModel.left);
    angular.element(element).css('position', 'absolute');

    jsPlumb.draggable(angular.element(element));

    // THIS IS STRANGE (undefined):
    log.info ("dragging enabled: " + angular.element(element).attr('draggable')); 
  }
}
[...]

因此，未设置“draggable”属性，拖动不起作用。如果我使用angular（和JQuery）直接启用拖动，它似乎可以工作：

angular.element(element).attr('draggable', true)

然而还有其他奇怪的效果（例如，不能在某处“删除”元素），所以我认为这还不够，我可能需要尽可能多地使用JSPlumb API。

我的HTML看起来像这样：

<div id="editorArea" class="knEditorArea panel panel-default">
  <div id="editorCanvas" class="knEditorCanvas">
    <div ng-repeat="(id, viewData) in nodeViews">
      <kn-editor-node node-id="{{id}}" />

相关的CSS就像：

.knEditorArea {
    height: 500px;
    position: relative;
}

.knEditorCanvas {
    position: absolute;
    height: 100%;
    width: 100%;
}

.knNode {
    position: absolute;
    border: 1px solid;
    border-radius: 0.5em;
    color: black;
    height: 5em;
    width: 5em;
    z-index:20;
}

Answer 1

链接函数中的angular元素已经是一个jquery元素，因此您不需要再进行包装。我有一个广泛使用JSPlumb的角度站点，单独使用元素对象。

function link(scope, elem, attrs){
   jsPlumb.draggable(elem, {
      start: function () {},
      drag: function (event, ui) {},
      stop: function (event, ui) {}
    });
}

我不得不将addEndpoint包含在链接函数内的零秒超时中，以便它可以使用。

Answer 2

好吧，我发现了问题。忘了加载JQuery UI库。添加后

  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

一切都按预期工作。

JSPlumb.draggable在Angular指令中不起作用

2 个答案: