javascript - 如何使用 AngularJS 在 TreeView 中添加静态值？

Question

我正在尝试在 AngularJS 中使用 jstree ( http://www.jstree.com/ )。我使用 jQuery Link 做了一个简单的例子。我将该插件集成到 Angular 中，但它不显示我的数据。为什么？

Preview .

    <div ng-controller="TestCtrl" ng-app="jsTreeApp">
      <br />
      <br />
      <br />
      <jstree data="fff"></jstree>
    </div>
  </body>

我们可以像在 fiddle 中那样在 TreeView 中添加静态数据吗？

Answer 1

Here's a JSFiddle

我已经使用你的 Plunker 使用 AngularJS 创建了一个 jstree。您的代码 var app = angular.module('jsTreeApp', ['jstree']); 将导致错误，因为 jstree 插件不是 Angular 模块。所以我把它删除了。

您是正确的，您需要使用指令来渲染树。我还修改了您的数据以使其正确呈现。查看示例数据:

$scope.treeData = {
    "data": [{
        "text": "Basics",
        "state": "open",
        "children": [
        {
            "text": "login",
            "state": "closed",
            "children": [
                "login", 
                {
                    "text": "results",
                    "state": "open"
                }
            ]
        }, {
            "text": "Basics",
            "state": "closed",
            "children": [
                "login",
                "something", 
                {
                    "text": "results",
                    "state": "closed"
                }
            ]
        }]
    }, {
        "text": "All",
        "state": "closed",
        "children": [{
            "text": "AddCustomer",
             "state": "closed",
             "children": [
                "login", 
                "Add",
                {
                    "text": "results",
                    "state": "closed"
                }
            ]
        }]
    }]
}