Use the wj-tree-view directive to add TreeView to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:

<wj-tree-view  items-source="items"
  display-member-path="ctx.displayMemberPath"
  child-items-path="ctx.childItemsPath"
  is-animated="ctx.isAnimated">
</wj-tree-view>

The wj-tree-view directive supports the following attributes:

items-source

=An array that contains the TreeView items.

child-items-path

@ A value indicating the name of the property (or properties) that contains the child items for each node.

control

= A reference to the TreeView control created by this directive.

display-member-path

@ A value indicating the name of the property (or properties) to use as the visual representation of the nodes.

image-member-path

@ A value indicating the name of the property (or properties) to use as a source of images for the nodes.

is-content-html

@ A value indicating whether whether items are bound to plain text or HTML.

initialized

& This event occurs after the binding has finished initializing the control with attribute values.

is-initialized

= A value indicating whether the binding has finished initializing the control with attribute values.

show-checkboxes

@ A value determines whether the TreeView should add checkboxes to nodes and manage their state.

auto-collapse

@ A value determines if sibling nodes should be collapsed when a node is expanded.

is-animated

@ A value indicating whether to use animations when expanding or collapsing nodes.

is-readOnly

@ A value determines whether users can edit the text in the nodes.

allow-dragging

@ A value determines whether users can drag and drop nodes within the TreeView.

expand-on-click

@ A value determines whether to expand collapsed nodes when the user clicks the node header.

selected-item

@ A value indicating the data item that is currently selected.

selected-node

@ A value indicating TreeNode that is currently selected.

checked-items

@ An array containing the items that are currently checked.

lazy-load-function

= A function that loads child nodes on demand.

items-source-changed

& The TreeView.itemsSourceChanged event handler.

loading-items

& The TreeView.loadingItems event handler.

loaded-items

& The TreeView.loadedItems event handler.

item-clicked

& The TreeView.itemClicked event handler.

selected-item-changed

& The TreeView.selectedItemChanged event handler.

checked-items-Changed

& The TreeView.checkedItemsChanged event handler.

is-collapsed-changing

& The TreeView.isCollapsedChanging event handler.

is-collapsed-changed

& The TreeView.isCollapsedChanged event handler.

is-checked-changing

& The TreeView.isCheckedChanging event handler.

is-checked-changed

& The TreeView.isCheckedChanged event handler.

format-item

& The TreeView.formatItem event handler.

drag-start

& The TreeView.dragStart event handler.

drag-over

& The TreeView.dragOver event handler.

drop

& The TreeView.drop event handler.

drag-end

& The TreeView.dragEnd event handler.

node-edit-starting

& The TreeView.nodeEditStarting event handler.

node-edit-started

& The TreeView.nodeEditStarted event handler.

node-edit-ending

& The TreeView.nodeEditEnding event handler.

node-edit-ended

& The TreeView.nodeEditEnded event handler.