Angular Directive for the famous JsTree
npm install ng-js-tree
ngJsTree
========
Angular Directive for the famous [JS Tree] library.
##Dependencies
The ngJsTree depends on the following libraries:
* Angular
* JsTree
##Install
You can install the ngJsTree with bower:
``bat
`
bower install ng-js-tree --save
`
or with npm:
bat
`
npm install ng-js-tree --save
`
or you can add the ngJsTree.min.js file to your HTML page:
html
`
ngJsTree
Add the to your module dependencies
`
#Documentation
You can find the JSTree documentation at [this link]
Usage
html
`
treeConfig
* - This is the configuration object of the JsTree, if you will not supply one, an empty one will be created (not mandatory).
treeData
* - The array with the elements of the tree, will be used for data binding (adding / removing / updating this data will be reflected in the tree).
ignoreModelChanges()
* - A method that returns true or false. when returning false, model changes will not be reflected in the tree (not mandatory).
treeInstance
* - The Js Tree instance will be assigned to this variable in your controller scope (not mandatory).
ready:readyCB;create_node:createNodeCB
* - List of Js Tree events and callbacks in your controller scope that will be called for each event (not mandatory.
tree-events
$3
You can register a callback for any Js Tree event in one of the following ways:
* add the attribute and specify the name of the events to register for and a callback for each event.
`
Example:
html
`
`
javascript
`
angular.module('myApp').controller('myCtrl', function($scope,$log) {
$scope.readyCB = function() {
$log.info('ready called');
};
$scope.createNodeCB = function(e,item) {
$log.info('create_node called');
};
);
tree-events-obj
* add the attribute passing an object containing the list of events with the callback objects.
`
Example:
html
`
`
javascript
`
angular.module('myApp').controller('myCtrl', function($scope,$log) {
$scope.treeEventsObj = {
'ready': readyCB,
'create_node': createNodeCB
}
function readyCB() {
$log.info('ready called');
};
function createNodeCB(e,item) {
$log.info('create_node called');
};
);
tree-events
NOTE: Only one of the methods can be used to pass event callbacks, will take precedence.
`
$3
Add the tree attribute to the jstree directive and assign it with a name of a variable in your controller that will hold the jstree instance.
html
`
`
javascript
`
function yourCtrl($scope) {
var selected_nodes = $scope.treeInstance.jstree(true).get_selected();
}
`
$3
If from some reason you would like to recreate the tree, the right way to do it is update the tree configuration object. Once the directive will detect a change to the tree configuration it will destory the tree and recreate it.
javascript
`
this.treeConfig = {
core : {
multiple : false,
animation: true,
error : function(error) {
$log.error('treeCtrl: error from js tree - ' + angular.toJson(error));
},
check_callback : true,
worker : true
},
version : 1
};
this.reCreateTree = function() {
this.treeConfig.version++;
}
npm install -g grunt-cli karma
* The reason I am using the version property is because it is not a JsTree config property, so it will not effect the tree.
Development
#### Prepare your environment
* Install Node.js and NPM (should come with)
* Install global dev dependencies:
npm install
* Install local dev dependencies: while current directory is ngJsTree
bower install
* Install javascript dependencies: while current directory is ngJsTree
grunt
#### Build
* Build the whole project: - this will run jshint and test and will build the project
grunt watch`
#### TDD
* Run test:
License
----
MIT
[JS Tree]:http://www.jstree.com/
[this link]:http://www.jstree.com/api/