从 angular 变量填充 jstree threeview

Question

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

我正在使用 jstree 构建 treview，它适用于静态数据（else 块中的数据），如下所示。

<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 块（ 可用于转储 {{ vm.list }} in HTML page) 那么我该怎么做呢？该文档有一些关于动态人口数据的详细信息（html, array/json, ajax, lazy load and callback），但没有我需要的。

将 vm 作为回调函数中的第三个参数传递并将 else 块更改为 cb(vm.cat); 没有成功。如果我的前端知识不是最底层的，我会想出更好的尝试！

我的 angular 控制器看起来像：

'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)
            }
        });
    }
});

从 angular 变量填充 jstree threeview

Populating jstree threeview from angular variable

javascript

jstree

angularjs