ivh-TreeView AngularJs在标签点击时获取节点ID

Question

我是 AngularJs 的新手，我使用 Angular Ivh_treeview 组件来显示来自 JSON 数据的嵌套树。树已正确加载。现在我想

在标签 Click 上获取节点 ID。因此，为了试用，我尝试制作一个警报框，以便我可以检查函数调用是否有效。 Ivh-Treeviewe 只有复选框功能。所以尝试添加自定义模板

nodeTpl: [
            '<div>',
            '<span ivh-treeview-toggle>',
            '<span ivh-treeview-twistie></span>',
            '</span>',
            '<span href="#here" class="ivh-treeview-node-label" ng-click="test()">',
            '{{trvw.label(node)}}',
            '</span>',
            '<div ivh-treeview-children></div>',
            '</div>'
        ].join('\n')

在控制器上

this.test = function() {
alert("hello");

}

现在点击事件没有被调用。有人可以解决这个问题。还尝试使用 $scope.test 定义但它没有用。

Answer 1

您的问题在于 ivh-treeview (v1) 不会使您的嵌入范围可用于您的节点模板。本质上，这意味着模板无法访问在树之外的范围内定义的内容。一切都没有丢失！你有几个选择：

1. 将您的点击逻辑包装在一个整洁的指令中。例如：

   ...
   '<span href="#here" class="ivh-treeview-node-label" do-fancy-things-on-click>',
   ...
   

这里，do-fancy-things-on-click 是您定义的指令，它侦听单击事件，然后检查 $scope 上的 node 并采取一些措施。您可以更新附加元素的显示、广播事件、与服务交互等。

1. 使用 ivh-treeview 的 v2 分支。这尚未完全发布，但为您的模板提供嵌入范围是我们打算继续支持向前发展的一项功能。我建议使用transcluded inline template。

请注意，v2 尚未完全删除的原因是因为我们尚未完成重大更改 :)。我不会期待任何太疯狂的事情，但如果第一个选项对您有效，它肯定会继续有效。