javascript - 从 Angular 变量填充 jstree ThreeView

Question

到目前为止，我已经用我非常有限的前端技能完成了 90% 的工作，所以我现在需要帮助。

我正在使用jstree构建 treview，它对于静态数据(else block 中的数据)运行良好，如下所示。

<script>
    $(function() {
        $("#list").jstree({
            "core": {
                "data": function (node, cb) {
                    if (node.id === "#") {
                        cb([{
                            "text": "Root",
                            "state": {"opened": true},
                            "children": true
                        }]);
                    } else {
                        // This is the one I am try to populate dynamicaly
                        cb([{"id":"1","text":"Lis 1"},{"id":"2","text":"Lis 2"}]);
                    }
                }
            }
        });
    });
</script>

但是，我现在需要使用来自 Angular 变量 vm.list 的动态结果集填充 else block (可用于转储 {{ vm.list }} 在 HTML 页面)那么我该怎么做呢？该文档包含一些有关动态人口数据的详细信息( html 、 array/json 、 ajax 、 lazy load 和 callback )，但没有我需要的。

将 vm 作为回调函数中的第三个参数传递，并将 else block 更改为 cb(vm.cat); 并没有达到目的。如果我的前端知识不是触底的话，我一定会想出更好的尝试!

我的 Angular Controller 看起来像:

'use strict';

module.exports = ['$on', '$timeout', 'listService',
    function($on, $timeout, listService) {
        var vm = this;
        ....
        load();
        ....

        function load() {
            // This is actually coming from an API and massive
            vm.cat = [{'id':'1', 'text':'Lis 1'}, {'id':'2', 'text':'Lis 2'}];
        };
    }
];

Answer 1

我有一个可行的解决方案，但不喜欢它，所以我会等待有人提供更好的解决方案，否则我会遗憾地接受这个，因为它将内容转储到 DOM 元素中并读取其内容以创建树，该树是在我看来有点老套和沉重。

<div id="data" style="display: none">{{ vm.cat }}</div>


$(function() {
    var data = $('#data').text();
    if (data) {
        $("#list").jstree({
            "core": {
                "data": JSON.parse(data)
            }
        });
    }
});