cytoscape.js-qtip 扩展：qtip.$domEle.qitp 不是函数答案

【问题标题】：cytoscape.js-qtip extension: qtip.$domEle.qitp is not a functioncytoscape.js-qtip 扩展：qtip.$domEle.qitp 不是函数
【发布时间】：2019-02-07 17:16:41
【问题描述】：

我在尝试为 AngularJS 指令中的 cytoscape 节点创建 qtip 工具提示时遇到错误消息 Uncaught TypeError: qtip.$domEle.qtip is not a function。

我的代码如下所示：

function graphDirective() {
  return {
    restrict: 'E',
    templateUrl: 'app/graph/graph.html',
    link() {
      const cytoscape = require('cytoscape');
      const jquery = require('jquery');
      const cyqtip = require('cytoscape-qtip');
      cyqtip(cytoscape, jquery);

      const cy = cytoscape({
        container: document.querySelector('graph #cy')
      });

      cy.add({
        nodes: [
          {
            data: {
              id: 'test'
            }
          }
        ]
      });

      cy.$('#test').qtip({
        content: 'Hello!'
        style: {
          classes: 'qtip-bootstrap'
      });
    }
  };
}

export default graphDirective;

我已经通过this quite similar thread，但是由于在cytoscape.js-qtip之前通过CommonJS需要jQuery，所以这个解决方案不太适合。

有谁知道如何解决这个问题？提前谢谢你。

编辑：修正了代码示例中的输入错误。

【问题讨论】：

这里没有足够的信息来重现该问题。尝试在没有 Angular 的情况下在更简单的设置中重现您的问题和/或创建一个完整运行的示例，在 Jsbin 或 Codepen 等上重现您的问题。如果您可以在完整示例中重现问题并且问题不是您自己的问题，请在扩展的问题跟踪器

标签： javascript angularjs qtip2 cytoscape.js

【解决方案1】：

我怀疑你的选择器有问题：

cy.$('test')

这应该是：

cy.$('#test')

...如果您正在通过 ID 查找节点。或者：

cy.$('.test')

...如果您正在按类查找节点。

有关选择器的更多信息：http://js.cytoscape.org/#selectors

【讨论】：

感谢您的回答，这只是概括代码示例时输入的输入错误，因此错误仍然存在。你还有什么想法吗？

【解决方案2】：

就我而言，yarn 同时安装了两个版本的jQuery：2.x 和 3.x。

如果您遇到同样的问题，解决方案很简单 - 只需将此属性添加到您的 package.json。

"resolutions": { 
  "jquery": "2.2.4" //or whatever version that satisfies all requirements
}

【讨论】：