Skip to content

Instantly share code, notes, and snippets.

@tyru

tyru/app.js

Created May 10, 2016 16:19
Show Gist options
  • Save tyru/96a6afd47314f271c4b8695e1419c698 to your computer and use it in GitHub Desktop.
Save tyru/96a6afd47314f271c4b8695e1419c698 to your computer and use it in GitHub Desktop.
Download ZIP
Lazy Loading with Angular Tree Control http://tyru.github.io/angular-tree-control-test/
Raw
app.js
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;
});
}]);
Raw
folder1-1.json
[
{"name": "File 1-1-1"}
]
Raw
folder1-2.json
[
{"name": "File 1-2-1"}
]
Raw
folder1.json
[
{"name": "Folder 1-1", "url": "folder1-1.json"},
{"name": "Folder 1-2", "url": "folder1-2.json"}
]
Raw
index.html
<!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>
Raw
root.json
[{
"name": "Folder 1",
"url": "folder1.json"
}]
@tyru
Copy link
Author

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
Copy link

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