JarCasting
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:
bower install ng-js-tree --save
or with npm:
npm install ng-js-tree --save
or you can add the ngJsTree.min.js file to your HTML page:
<script src="jquery.js"/>
<script src="angular.js"/>
<script src="jstree.min.js"/>
<script src="ngJsTree.min.js"/>
Add the ngJsTree to your module dependencies
Documentation
You can find the JSTree documentation at this link
Usage
<div js-tree="treeConfig" ng-model="treeData" should-apply="ignoreModelChanges()" tree="treeInstance" tree-events="ready:readyCB;create_node:createNodeCB"></div>
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).
Registering for events
You can register a callback for any Js Tree event in one of the following ways:
- add the
tree-eventsattribute and specify the name of the events to register for and a callback for each event.
Example:
<div ng-controller='myCtrl'>
<div js-tree="treeConfig" ng-model="treeData" should-apply="ignoreModelChanges()" tree="treeInstance" tree-events="ready:readyCB;create_node:createNodeCB"></div>
</div>
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');
};
);
- add the
tree-events-objattribute passing an object containing the list of events with the callback objects.
Example:
<div ng-controller='myCtrl'>
<div js-tree="treeConfig" ng-model="treeData" should-apply="ignoreModelChanges()" tree="treeInstance" tree-events-obj="treeEventsObj"></div>
</div>
angular.module('myApp').controller('myCtrl', function($scope,$log) {
$scope.treeEventsObj = {
'ready': readyCB,
'create_node': createNodeCB,
'select_node': selectNodeCB // on node selected callback
}
function readyCB() {
$log.info('ready called');
};
function createNodeCB(e,item) {
$log.info('create_node called');
};
function selectNodeCB(node, selected, event) {
$log.info("some_node_selected");
};
);
NOTE: Only one of the methods can be used to pass event callbacks, tree-events will take precedence.
Using the Js Tree API from your controller
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.
<div ng-controller='myCtrl'>
<div js-tree="treeConfig" ng-model="treeData" tree="treeInstance"></div>
</div>
function yourCtrl($scope) {
var selected_nodes = $scope.treeInstance.jstree(true).get_selected();
}
Recreating the Tree
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.
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++;
}
- 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 -g grunt-cli karma - Install local dev dependencies:
npm installwhile current directory is ngJsTree - Install javascript dependencies:
bower installwhile current directory is ngJsTree
Build
- Build the whole project:
grunt- this will runjshintandtestand will build the project
TDD
- Run test:
grunt watch
License
MIT