jsTree | An Angular Directive for jsTree for showing folder-file structure

jstree angular directive

jsTree

Stars : 10

Forks : 10

Created by Arvind Ravulavaru

bower install jsTree-directive

Demo Download GitHub

jsTree-directive

An Angular Directive for jsTree

Install using bower

$ bower i jstree-directive

Tutorial

Building a Web Based File Browser with jsTree, Angularjs and Expressjs

PS : Do note that if you want to make your app 100% Angular, load the jsTree Javascript source using an Angular provider as a dependency to jstree.directive.

Steps :

  • Download jsTree.directive.js OR run bower install jstree-directive.
  • Include the reference in your index.html.
  • Add ‘jsTree.directive’as a dependency to your app and you can use the below config to setup your tree.
    var app = angular.module('treeDemo', ['jsTree.directive'])
  • Set tree-data=”html”and tree-src=”/path/to/html”:
    <js-tree tree-data="html" tree-src="../jstree/data/tree-html.html"></js-tree>
  • Html Code:
    <ul>
      <li>Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
          <li data-jstree='{"opened":true,"selected":true}'>Root
            <ul>
              <li data-jstree='{"disabled":true}'>Child</li>
              <li data-jstree='{"icon":"/jstree/imgs/tree.png"}'>
                Child</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Root node 2</li>
    </ul>

Javscript

Javascript plugin

Angular-js