树控件可以作为一个DOM元素或属性。

复制脚本和CSS为你的项目添加一个脚本和链接到你的页面。

<script type="text/javascript" src="/angular-tree-control.js"></script>

<link rel="stylesheet" type="text/css" href="css/tree-control.css">

<link rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">

添加一个依赖于您的应用程序模块

angular.module('myApp', ['treeControl']);

将树元素添加到您的模板

<!-- as a Dom element -->

<treecontrol class="tree-classic"

   tree-model="dataForTheTree"

   options="treeOptions"

   on-selection="showSelected(node)"

   selected-node="node1">

   employee: {{node.name}} age {{node.age}}

</treecontrol>

<!-- as an attribute -->

<div treecontrol class="tree-classic"

   tree-model="dataForTheTree"

   options="treeOptions"

   on-selection="showSelected(node)"

   selected-node="node1">

   employee: {{node.name}} age {{node.age}}

</div>

并为树添加数据

$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" : [] }

];

样式

树控件呈现以下的DOM结构

<treecontrol class="tree-classic">

  <ul>

    <li class="tree-expanded">

      <i class="tree-branch-head"></i>

      <i class="tree-leaf-head"></i>

      <div class="tree-label">

         ... label - expanded angular template is in the treecontrol element ...

      </div>

      <treeitem>

        <ul>

          <li class="tree-leaf">

            <i class="tree-branch-head"></i>

            <i class="tree-leaf-head"></i>

            <div class="tree-label tree-selected">

              ... label - expanded angular template is in the treecontrol element ...

            </div>

          </li>

          <li class="tree-leaf">

            <i class="tree-branch-head"></i>

            <i class="tree-leaf-head"></i>

            <div class="tree-label">

              ... label - expanded angular template is in the treecontrol element ...

            </div>

          </li>

        </ul>

      </treeitem>

    </li>

  </ul>

</treecontrol>

CSS类用于内置样式的树控件。附加的类可以使用options.injectclasses成员加入（见上文）

树扩展，树倒塌，树叶放在“UL”元素

树枝头，树的叶头-被放置在'i'元素。我们使用这些类来放置树的图标

树选择放置于标签div