├── README.md
├── bower.json
└── jsTree.directive.js


/README.md:
--------------------------------------------------------------------------------
 1 | jsTree-directive
 2 | ================
 3 | 
 4 | An Angular Directive for jsTree
 5 | 
 6 | * [Documentation](http://jstree-directive.herokuapp.com/#/basic)
 7 | 
 8 | Install using `bower`
 9 | 
10 | ```bash
11 | $ bower i jstree-directive
12 | ```
13 | 
14 | ### Tutorial 
15 | 
16 | [Building a Web Based File Browser with jsTree, Angularjs and Expressjs](http://thejackalofjavascript.com/file-browser-with-jstree-angularjs-and-expressjs)
17 | 
18 | **_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._**
19 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jsTree-directive",
 3 |   "version": "0.1.5",
 4 |   "authors": [
 5 |     "Arvind Ravulavaru <arvind.ravulavaru@gmail.com>"
 6 |   ],
 7 |   "description": "An Angular Directive for jsTree",
 8 |   "keywords": [
 9 |     "Angular",
10 |     "Directive",
11 |     "jsTree"
12 |   ],
13 |   "main": "jsTree.directive.js",
14 |   "license": "MIT",
15 |   "homepage": "https://github.com/arvindr21/jsTree-directive",
16 |   "ignore": [
17 |     "**/.*",
18 |     "node_modules",
19 |     "bower_components",
20 |     "test",
21 |     "tests"
22 |   ],
23 |   "moduleType": [
24 |     "node"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/jsTree.directive.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * jstree.directive [http://www.jstree.com]
  3 |  * http://arvindr21.github.io/jsTree-Angular-Directive
  4 |  *
  5 |  * Copyright (c) 2014 Arvind Ravulavaru
  6 |  * Licensed under the MIT license.
  7 |  */
  8 | 
  9 | var ngJSTree = angular.module('jsTree.directive', []);
 10 | ngJSTree.directive('jsTree', ['$http', function($http) {
 11 | 
 12 |   var treeDir = {
 13 |     restrict: 'EA',
 14 |     fetchResource: function(url, cb) {
 15 |       return $http.get(url).then(function(data) {
 16 |         if (cb) cb(data.data);
 17 |       });
 18 |     },
 19 | 
 20 |     managePlugins: function(s, e, a, config) {
 21 |       if (a.treePlugins) {
 22 |         config.plugins = a.treePlugins.split(',');
 23 |         config.core = config.core || {};
 24 |         config.core.check_callback = config.core.check_callback || true;
 25 | 
 26 |         if (config.plugins.indexOf('state') >= 0) {
 27 |           config.state = config.state || {};
 28 |           config.state.key = a.treeStateKey;
 29 |         }
 30 | 
 31 |         if (config.plugins.indexOf('search') >= 0) {
 32 |           var to = false;
 33 |           if (e.next().attr('class') !== 'ng-tree-search') {
 34 |             e.after('<input type="text" placeholder="Search Tree" class="ng-tree-search"/>')
 35 |               .next()
 36 |               .on('keyup', function(ev) {
 37 |                 if (to) {
 38 |                   clearTimeout(to);
 39 |                 }
 40 |                 to = setTimeout(function() {
 41 |                   treeDir.tree.jstree(true).search(ev.target.value);
 42 |                 }, 250);
 43 |               });
 44 |           }
 45 |         }
 46 | 
 47 |         if (config.plugins.indexOf('checkbox') >= 0) {
 48 |           config.checkbox = config.checkbox || {};
 49 |           config.checkbox.keep_selected_style = false;
 50 |         }
 51 | 
 52 |         if (config.plugins.indexOf('contextmenu') >= 0) {
 53 |           if (a.treeContextmenu) {
 54 |             config.contextmenu = s[a.treeContextmenu];
 55 |           }
 56 |         }
 57 | 
 58 |         if (config.plugins.indexOf('types') >= 0) {
 59 |           if (a.treeTypes) {
 60 |             config.types = s[a.treeTypes];
 61 |             console.log(config);
 62 |           }
 63 |         }
 64 | 
 65 |         if (config.plugins.indexOf('dnd') >= 0) {
 66 |           if (a.treeDnd) {
 67 |             config.dnd = s[a.treeDnd];
 68 |             console.log(config);
 69 |           }
 70 |         }
 71 |       }
 72 |       return config;
 73 |     },
 74 |     manageEvents: function(s, e, a) {
 75 |       if (a.treeEvents) {
 76 |         var evMap = a.treeEvents.split(';');
 77 |         for (var i = 0; i < evMap.length; i++) {
 78 |           if (evMap[i].length > 0) {
 79 | 	    // plugins could have events with suffixes other than '.jstree'
 80 |             var evt = evMap[i].split(':')[0];
 81 |             if (evt.indexOf('.') < 0) {
 82 |               evt = evt + '.jstree';
 83 |             }
 84 |             var cb = evMap[i].split(':')[1];
 85 |             treeDir.tree.on(evt, s[cb]);
 86 |           }
 87 |         }
 88 |       }
 89 |     },
 90 |     link: function(s, e, a) { // scope, element, attribute \O/
 91 |       $(function() {
 92 |         var config = {};
 93 | 	
 94 | 	// users can define 'core'
 95 |         config.core = {};
 96 |         if (a.treeCore) {
 97 |           config.core = $.extend(config.core, s[a.treeCore]);
 98 |         }
 99 | 
100 |         // clean Case
101 |         a.treeData = a.treeData ? a.treeData.toLowerCase() : '';
102 |         a.treeSrc = a.treeSrc ? a.treeSrc.toLowerCase() : '';
103 | 
104 |         if (a.treeData == 'html') {
105 |           treeDir.fetchResource(a.treeSrc, function(data) {
106 |             e.html(data);
107 |             treeDir.init(s, e, a, config);
108 |           });
109 |         } else if (a.treeData == 'json') {
110 |           treeDir.fetchResource(a.treeSrc, function(data) {
111 |             config.core.data = data;
112 |             treeDir.init(s, e, a, config);
113 |           });
114 |         } else if (a.treeData == 'scope') {
115 |           s.$watch(a.treeModel, function(n, o) {
116 |             if (n) {
117 |               config.core.data = s[a.treeModel];
118 |               $(e).jstree('destroy');
119 |               treeDir.init(s, e, a, config);
120 |             }
121 |           }, true);
122 |           // Trigger it initally
123 |           // Fix issue #13
124 |           config.core.data = s[a.treeModel];
125 |           treeDir.init(s, e, a, config);
126 |         } else if (a.treeAjax) {
127 |           config.core.data = {
128 |             'url': a.treeAjax,
129 |             'data': function(node) {
130 |               return {
131 |                 'id': node.id != '#' ? node.id : 1
132 |               };
133 |             }
134 |           };
135 |           treeDir.init(s, e, a, config);
136 |         }
137 |       });
138 | 
139 |     },
140 |     init: function(s, e, a, config) {
141 |       treeDir.managePlugins(s, e, a, config);
142 |       this.tree = $(e).jstree(config);
143 |       treeDir.manageEvents(s, e, a);
144 |     }
145 |   };
146 | 
147 |   return treeDir;
148 | 
149 | }]);
150 | 


--------------------------------------------------------------------------------