Hi, I want to use Angular to render a tree structure. My directive is shown
below.
The problem is that the tree take about *500ms *to render for a tree with
about 80 nodes and 4 levels deep. *Note once rendered*, the tree's
performance is fine, only rendering take a super long time.
I know there are many widgets out there that render angularjs tree, but *I
am just really curious why my implementation take so long to render*.
Hopfully it is my code's problem.
The knowledgeTreeCtrl has a refrence to rootNode which is the root node of
the tree. The template uses an ng-include inside a ng-repeat to create a
recursion.
angular.module('myDirectives').directive('knowledgeTree', function () {
var template = [
'<div class="knowledge-tree">',
'<div class="mful" ng-repeat="node in rootNode.getChildren()"
ng-include src="\'knowledge_node_renderer\'">',
'</div>',
'<script type="text/ng-template"
id="knowledge_node_renderer">',
'<div class="node-content">',
'<span ng-click="node.toggleClosed()">',
'<span class="expand"
ng-show="node.hasChildren()"></span>',
'<span class="collapse"
ng-show="node.hasChildren()"></span>',
'</span>',
'<div ng-click="leafNodeClicked(node)">',
'<span class="node-name">{{node.name}}</span>',
'<input type="checkbox"
ng-checked="node.isSelected()" ng-hide="node.hasChildren()">',
'</div>',
'</div>',
'<ul ng-hide="node.isClosed()">',
'<li ng-repeat="node in node.getChildren()"
ng-include src="\'knowledge_node_renderer\'">',
'</li>',
'</ul>',
'</script>',
'</div>'
];
return {
restrict: 'E',
controller: 'knowledgeTreeCtrl',
template: template.join('')
};
});
Million thanks in advance.
Di
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
