Angular Tree Control 无法正常工作答案

【问题标题】：Angular Tree Control not working perperlyAngular Tree Control 无法正常工作
【发布时间】：2018-08-09 03:59:27
【问题描述】：

我正在使用https://wix.github.io/angular-tree-control/#multi-selection 处理树结构示例。我没有得到正确格式的预期结果。下面是代码，还附上了 plunkr。

 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
 <link href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
 <link href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
 </head>
 <div ng-app="app">
 <div ng-controller="myController">
 <treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
 </treecontrol>
 </div>
 </div>

  angular.module('app', ['treeControl'])
 .controller('myController', function() {
 $scope.treeOptions = {
 nodeChildren: "children",
 dirSelectable: true,
 injectClasses: {
    ul: "a1",
    li: "a2",
    liSelected: "a7",
    iExpanded: "a3",
    iCollapsed: "a4",
    iLeaf: "a5",
    label: "a6",
    labelSelected: "a8"
  }
 }
$scope.dataForTheTree =
[
    { "name" : "Joe", "age" : "21", "children" : [
    { "name" : "Smith", "age" : "42", "children" : [] },
    { "name" : "Gary", "age" : "21", "children" : [
        { "name" : "Jenifer", "age" : "23", "children" : [
            { "name" : "Dani", "age" : "32", "children" : [] },
            { "name" : "Max", "age" : "34", "children" : [] }
        ]}
    ]}
]},
{ "name" : "Albert", "age" : "33", "children" : [] },
{ "name" : "Ron", "age" : "29", "children" : [] }
];
});
Here is the attached plunkr https://plnkr.co/edit/bQHOIQ2HDPr4WJaukB8I?p=preview

【问题讨论】：

标签： angularjs treecontrol

【解决方案1】：

我注意到缺少两件事：

缺少上下文菜单模块。
添加的 CSS 链接中没有 rel="stylesheet"。

尽管angular-tree-control readme 说：

如果要使用 menu-id 属性，请包含 context-menu 模块

我在他们的 GitHub 页面中发现了问题，例如 this one，这是由于缺少上下文菜单模块。

添加以下行以包含上下文菜单模块：

<script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>

另外请更新链接元素以包含rel 属性，如下所示：

<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />

不需要像 Plunker 那样添加 CSS，这是上述链接的副本。

希望这可以解决您的问题。这是一个工作示例的完整代码：

angular.module('app', ['treeControl'])
  .controller('myController', ['$scope', function($scope) {
    $scope.treeOptions = {
      nodeChildren: "children",
      dirSelectable: true,
      injectClasses: {
        ul: "a1",
        li: "a2",
        liSelected: "a7",
        iExpanded: "a3",
        iCollapsed: "a4",
        iLeaf: "a5",
        label: "a6",
        labelSelected: "a8"
      }
    }
    $scope.dataForTheTree = [{
        "name": "Joe",
        "age": "21",
        "children": [{
            "name": "Smith",
            "age": "42",
            "children": []
          },
          {
            "name": "Gary",
            "age": "21",
            "children": [{
              "name": "Jenifer",
              "age": "23",
              "children": [{
                  "name": "Dani",
                  "age": "32",
                  "children": []
                },
                {
                  "name": "Max",
                  "age": "34",
                  "children": []
                }
              ]
            }]
          }
        ]
      },
      {
        "name": "Albert",
        "age": "33",
        "children": []
      },
      {
        "name": "Ron",
        "age": "29",
        "children": []
      }
    ];
  }]);

treecontrol.tree-classic li .full {
  display: none;
}

treecontrol.tree-classic li .empty {
  display: inline;
}

treecontrol.tree-classic li .tree-selected .full {
  display: inline;
}

treecontrol.tree-classic li .tree-selected .empty {
  display: none;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
  <script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>
  <link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
  <link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body ng-app="app">
  <div ng-controller="myController">
    <treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions" on-selection="showSelected(node)" selected-node="node1">
      <span class="fa fa-square-o empty"></span>
      <span class="fa fa-square full"></span> employee: {{node.name}} age {{node.age}}
    </treecontrol>
  </div>

</body>

</html>

2018 年 8 月 10 日更新：编辑了代码 sn-p 以使用 FontAwsome 添加复选框。

【讨论】：

谢谢。它起作用了。我可以为父节点和子节点放置复选框吗。我试过员工：{{ node.name}} 年龄 {{node.age}}
@GrailsLearner 你想添加复选框而不是文件夹图标吗？
是的，我需要一个复选框。
您可以使用复选框和 FontAwsome 图标来做到这一点。请参阅以下示例：1. embed.plnkr.co/52UdEJ 2. codepen.io/jamesbarnett/pen/yILjk 并使用 CSS 隐藏该文件夹图标
我编辑了我的问题，我需要在文件夹旁边有一个方框。fa fa-square-o 应该显示那个不工作的方框。