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-events attribute 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-obj attribute 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
    }
 
    function readyCB() {
        $log.info('ready called');
    };
 
    function createNodeCB(e,item) {
        $log.info('create_node called');
    };
);

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 install while current directory is ngJsTree
• Install javascript dependencies: bower install while current directory is ngJsTree

Build

• Build the whole project: grunt - this will run jshint and test and will build the project

TDD

• Run test: grunt watch

License

MIT