ngTree
Module to use tree.js in your AngularJS applications.
Installation
It is available with bower:
bower install ng-tree
Then add the retrieved files to your HTML layout:
You can also use it with RequireJS as an AMD module.
Then add ngTree
as dependency for your AngularJS application:
var app = angular;
Configuration
To build a tree the module provides a service $treeFactory
. Just call it to build a tree from raw data:
var tree = ;
The tree is a hookable tree already configured to use $q
as promises library.
$treeFactory
get tree.js from window.Tree
if you include it in others ways (with RequireJS for example), you can use anywhere $treeFactory.factory(YOUR TREE.JS)
to configure it.
Usage
See tree.js for detailed documentation. The generated trees by $treeFactory
work the same way with some improvements:
- When you register a hook listener you can use dependency injection like below:
tree; // You can also do: tree;
- Each tree and its children are decorated with a
collapsed
attribute and atoggle
method which inverts attributes:
tree.attr('collapsed'); // true
tree.toggle('collapsed');
tree.attr('collapsed'); // false
Display the tree
To display the tree you have to use the tree-view
directive:
Handle a click on a tree/sub-tree
When a click is triggered on a tree or a sub-tree, the default behaviour is to toggle the collapsed
attribute on it. You can add your own click handler by adding the attribute tree-click
:
You can pass to your handler two existing arguments:
$event
: the click eventtree
: the tree on which the click was triggered
The handler can return both a classic value (or nothing) and a promise. If it returns a promise, the toggle action will occur only if the promise is resolved.
Customize templates
You can have a full access to the templates used by tree-view
and tree-child-view
in order to edit them with the service $treeTemplateFactory
:
$treeTemplateFactory // returns tree-view template$treeTemplateFactory // edit tree-view template $treeTemplateFactory // returns tree-child-view template$treeTemplateFactory // edit tree-child-view template
tree-view
will represent the ul
element and tree-child-view
the li
element.
Build
To rebuild the minified JavaScript you must run: make build
.
Tests
Install dependencies and run the unit tests:
make install
make test-spec
Contributing
All contributions are welcome and must pass the tests. If you add a new feature, please write tests for it.
License
This application is available under the MIT License, courtesy of marmelab.