Created
May 10, 2016 16:19
-
-
Save tyru/96a6afd47314f271c4b8695e1419c698 to your computer and use it in GitHub Desktop.
Lazy Loading with Angular Tree Control http://tyru.github.io/angular-tree-control-test/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| }); | |
| }]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| {"name": "File 1-1-1"} | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| {"name": "File 1-2-1"} | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| {"name": "Folder 1-1", "url": "folder1-1.json"}, | |
| {"name": "Folder 1-2", "url": "folder1-2.json"} | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [{ | |
| "name": "Folder 1", | |
| "url": "folder1.json" | |
| }] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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();
;-)