Skip to content
Go to file

Latest commit

Bumps [angular]( from 1.7.9 to 1.8.0.
- [Release notes](
- [Changelog](
- [Commits](angular/angular.js@v1.7.9...v1.8.0)

Signed-off-by: dependabot[bot] <>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]>

Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Bower version Build Status Dependency Status Coverage Status Code Climate Built with Grunt NPM


Angular Directive for the famous JS Tree library.


The ngJsTree depends on the following libraries:

  • Angular
  • JsTree


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


You can find the JSTree documentation at this link


<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.


<div ng-controller='myCtrl'>
    <div js-tree="treeConfig" ng-model="treeData" should-apply="ignoreModelChanges()" tree="treeInstance" tree-events="ready:readyCB;create_node:createNodeCB"></div>
angular.module('myApp').controller('myCtrl', function($scope,$log) {
    $scope.readyCB = function() {
        $'ready called');

    $scope.createNodeCB = function(e,item) {
        $'create_node called');
  • add the tree-events-obj attribute passing an object containing the list of events with the callback objects.


<div ng-controller='myCtrl'>
    <div js-tree="treeConfig" ng-model="treeData" should-apply="ignoreModelChanges()" tree="treeInstance" tree-events-obj="treeEventsObj"></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() {
        $'ready called');

    function createNodeCB(e,item) {
        $'create_node called');
    function selectNodeCB(node, selected, event) {

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>
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() {
  • The reason I am using the version property is because it is not a JsTree config property, so it will not effect the tree.


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 the whole project: grunt - this will run jshint and test and will build the project


  • Run test: grunt watch



You can’t perform that action at this time.