Skip to content

Instantly share code, notes, and snippets.

@tyru

tyru/app.js

Created May 10, 2016
Embed
What would you like to do?
Lazy Loading with Angular Tree Control http://tyru.github.io/angular-tree-control-test/
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"
}]
@tyru

This comment has been minimized.

Copy link
Owner Author

@tyru tyru commented May 10, 2016

This is simplified version.
See http://tyru.github.io/angular-tree-control-test/ for the full & live example.

@inquota

This comment has been minimized.

Copy link

@inquota inquota commented Jun 14, 2016

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?

@tyru

This comment has been minimized.

Copy link
Owner Author

@tyru tyru commented Oct 22, 2016

@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 ?

@inquota

This comment has been minimized.

Copy link

@inquota inquota commented Dec 4, 2016

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();

;-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.