2016-11-28 173 views
0

在我的页面上,我正在渲染基于jsTree角度指令的树。我试图实现一个显示工具提示悬停特别是具有描述字段的节点。我已经检查的API列表jsTree和悬停事件侦听器hover_node发现,与jsTree帮助角指令我已经安装我的范围功能,这个监听器doc.addEventListener不是函数

<js-tree 
     tree-data="scope" 
     tree-model="tree" 
     tree-events="hover_node:nodeHovered" 
     tree-core="tree_core" 
></js-tree> 

$scope.nodeHovered = function (e, data) { 

     var dataNode = data.node; 
     var original = dataNode.original; 

     if (typeof original.description !== 'undefined'){ 

     var nodeDescription = original.description; 

      $(original).tooltip({ 
       title: nodeDescription, 
       animation: true 
      }); 
     } 
    }; 

我的功能效果很好,当我将鼠标悬停在任何节点上,我可以在控制台中看到对象数据,因此我编写了一段代码,它允许在控制台中查看描述,如果typeof节点描述不等于undefined。它非常适用控制台,但是当我加入的功能引导提示这个节点时,显示的描述信息为提示,我有一个错误

Uncaught TypeError: doc.addEventListener is not a function

,因为我可以从一些主题在这里明白了,这个错误的性质数组没有addEventListener函数,但我正在处理一个已经通过库定义的对象,所以任何人都可以帮助找到我失踪的东西?我感谢任何帮助。

Plunker

我完整的代码

var treeFolders = []; 
    $scope.tree = []; 


    $http.get("folders.json") 
      .then(function (res) { 
       treeFolders = res.data; 
       angular.forEach(treeFolders, function(obj){ 
        if(!("parent" in obj)){ 
         obj.parent = "#"; 
          } 
         }) 
        }) 

    $scope.load = function(){ 
       $scope.tree = treeFolders 
      }; 


    $scope.tree_core = { 
       multiple: false, // disable multiple node selection 
       check_callback: function (operation, node, node_parent, node_position, more) { 
       return true; // allow all other operations 
       }, 
       themes : { 
        theme : "default", 
        dots : true, 
        icons : true 
       } 
      }; 

    $scope.nodeHovered = function (e, data) { 

     var dataNode = data.node; 
     var original = dataNode.original; 

     if (typeof original.description !== 'undefined'){ 

     var nodeDescription = original.description; 

      $(original).tooltip({ 
       title: nodeDescription, 
       animation: true 
      }); 
     } 
    }; 

HTML

<button class="btn btn-default" ng-click="load()">Load Tree</button> 

    <js-tree 
      tree-data="scope" 
      tree-model="tree" 
      tree-events="hover_node:nodeHovered" 
      tree-core="tree_core" 
></js-tree> 
+1

代码应张贴* *在这里,而不是Plunker或其他网站。 – Pointy

+0

@Pointy请检查最新答案 – antonyboom

+0

这对你有帮助吗? – tasseKATT

回答

1

这是因为original对象要传递到jQuery的在下面的代码是一个jsTree节点,而不是一个DOM元素:

$(original).tooltip({ 
    title: nodeDescription, 
    animation: true 
}); 

而是使用jsTree的get_node方法来检索的jQuery包裹的DOM元素从节点:

var liElement = data.instance.get_node(data.node, true); 

这会给你整个li元素,但你可能要相对a元素放置工具提示:

var aElement = liElement.children('a').first(); 

然后:

aElement.tooltip({ 
    title: nodeDescription, 
    animation: true 
}).tooltip('show'); 

请注意,我最后在tooltip上增加了一个额外的电话。这是为了在元素第一次被徘徊时显示工具提示。没有这个工具提示会在第一次悬停时创建,然后直到下一次才显示。

演示:https://plnkr.co/edit/itMSrsroTVswD3RLbs7O?p=preview

+0

感谢您的解释,现在对我来说很清楚 – antonyboom