-
-
Save tyru/96a6afd47314f271c4b8695e1419c698 to your computer and use it in GitHub Desktop.
| angular.module('tyru', ['treeControl']) | |
| .controller('MainCtrl', ['$http', '$timeout', function ($http, $timeout) { | |
| var ctrl = this; | |
| ctrl.loadingTime = 1500; | |
| ctrl.treeModel = []; | |
| ctrl.treeOptions = { | |
| dirSelectable: false, // Click a folder name to expand (not select) | |
| isLeaf: function isLeafFn(node) { | |
| return !node.hasOwnProperty('url'); | |
| } | |
| }; | |
| ctrl.fetchChildNodes = function fetchChildNodes(node, expanded) { | |
| function doFetch(node) { | |
| if (node.hasOwnProperty('url')) { | |
| console.log('GET ' + node.url); | |
| $http.get(node.url) | |
| .success(function(data) { | |
| console.log('GET ' + node.url + ' ... ok! ' + angular.toJson(data)); | |
| node.children = data; | |
| }); | |
| } else { | |
| // Leaf node | |
| } | |
| } | |
| if (node._sent_request) { | |
| return; | |
| } | |
| node._sent_request = true; | |
| // Add a dummy node. | |
| node.children = [{name: 'Loading ...'}]; | |
| $timeout(function() { doFetch(node) }, ctrl.loadingTime); | |
| }; | |
| $http.get('root.json') | |
| .success(function(data) { | |
| ctrl.treeModel = data; | |
| }); | |
| }]); |
| [ | |
| {"name": "File 1-1-1"} | |
| ] |
| [ | |
| {"name": "File 1-2-1"} | |
| ] |
| [ | |
| {"name": "Folder 1-1", "url": "folder1-1.json"}, | |
| {"name": "Folder 1-2", "url": "folder1-2.json"} | |
| ] |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <link rel="stylesheet" href="css/tree-control.css" /> | |
| <link rel="stylesheet" href="css/tree-control-attribute.css" /> | |
| <title>Try Angular Tree Control</title> | |
| </head> | |
| <body ng-app='tyru'> | |
| <div class='container' ng-controller='MainCtrl as $ctrl'> | |
| Fake Loading Time: <input type=number ng-model='$ctrl.loadingTime'> ms | |
| <br> | |
| <br> | |
| <treecontrol class="tree-classic" | |
| tree-model="$ctrl.treeModel" | |
| on-node-toggle="$ctrl.fetchChildNodes(node, expanded)" | |
| options="$ctrl.treeOptions"> | |
| {{node.name}} | |
| </treecontrol> | |
| </div> | |
| <script src="/lib/angular-1.5.5/angular.js"></script> | |
| <script src="js/angular-tree-control.js"></script> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
| [{ | |
| "name": "Folder 1", | |
| "url": "folder1.json" | |
| }] |
Thanks for sharing your code! I tried it in my application but, the child nodes will be displayed on the 2nd click. This is my code:
on-node-toggle="ctrl.fetchChildNodes(node, expanded)"
controllerScope.treeOptions = { nodeChildren: "children", dirSelectable: true, multiSelection: false, injectClasses: { ul: "a1", li: "a2", liSelected: "a7", iExpanded: "expanded", iCollapsed: "collapsed", iLeaf: "a5", label: "a6", labelSelected: "a8" }, isLeaf: function isLeafFn(node) { return !node.hasOwnProperty('hasChildren'); } };
controllerScope.fetchChildNodes = function (node, expanded) { if(expanded) { if (node.hasOwnProperty('hasChildren')) { var token = jQuery('meta[name="csrf_token"]').attr('content'); jQuery.ajax({ method: 'POST', headers: {'X-XSRF-TOKEN': token}, url: '/ajax/nodes/children', data: { nodeId: node.id } }) .success(function (data) { node.children = data; }) .done(function (data) { node.children = data; }) .fail() } } };
Any idea how to fix this?
@inquota Gist seems not to send email notification if you just comment to Gist page.
I missed your comment long time...
(F.Y.I. you can use ~ for multiple lines code block)
I think maybe the problem was fixed.
I tried to answer you question.
the child nodes will be displayed on the 2nd click
I can't understand well your problem though, but I guess you want dirSelectable: false ?
jQuery.ajax({ method: 'POST', headers: {'X-XSRF-TOKEN': token}, url: '/ajax/nodes/children', data: { nodeId: node.id } }) .success(function (data) { node.children = data; $rootScope.$apply(); //solved the first click bugfix for toggle children jQuery('.tree-origin #loading-tree-origin-node-' + node.id).fadeOut(); }) .done(function (data) { }) .fail(function (data) { })
It's fixed with: rootScope.$apply();
;-)
This is simplified version.
See http://tyru.github.io/angular-tree-control-test/ for the full & live example.