如何使用$ templateCache进行递归指令？

Question

I was trying to use angular.treeview to display a tree structure, and it works just fine. However, it causes infinite loop when I use $templateCache to make it more maintainable. It looks like using a string to store the template removes the outermost loop in the recursive calls that is not happening with template retrieved from $templateCache. You will see the problem after commenting out the second line (line #88 in angular.treeview.js) in my example at http://plnkr.co/edit/khQ7BMPRYedK6B1PVlDY?p=preview .

$log.log('cache:' + templateCache.get('treeNode.html'));
//template = templateCache.get('treeNode.html
$log.log('string:' + template);
                    //Rendering template.
                    element.html('').append( $compile( template )( scope ) );

The other question if I can get $templateCache work is how to replace variables in the template before it's compiled? I'd like to replace those variables like treeModel and nodeChildren in the template to make the code more flexible.

Answer 1

Got it working by naming controller's $scope variable same as the recursive call's. In other words, change $scope.roleList to $scope.node.children solved the infinite loop problem.

//template refrence node.children
<li data-ng-repeat="node in node.children">

//assign tree nodes to $scope.node.children
$scope.node = {};
$scope.node.children = this.roleList1;

Since I have moved to using controllerAs syntax, I created an example at http://plnkr.co/edit/Ua63IlaAqsRtgiGfbMaq?p=preview with the fix, and the mix of using $scope and controllerAs variables. The fix essentially utilize the side-effect of referencing $scope variables without qualifying with $scope. , so you can use the same name to refer to your $scope variables as well as the local variables inside the recursive loop.