AngularJS directives for recursive data.

Added by: Sam Deering





Stars: 4

Watchers: 4

Forks: 0

Module Description

Andular Recursive

This is AngularJS directive for tree strucuture datum recursively.

How to install

Download angular-recursive.js file from here, or use bower.

$ bower install angular-recursive

And load script into your html.

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-recursive/js/angular-recursive.js"></script>


Load quramy-recursive module into your app.

var myApp = angular.module('myApp', ['quramy-recursive']);

Setup recursive structure data on your scope.

myApp.controller('Ctrl', ['$scope', function($scope){
    $scope.treeData = {
        name: 'root',
        children: [
            { name: 'usr', children:[{ name: 'lib' }, {name: 'bin'}] },
            { name: 'var' }

Markup q-recurse and q-recurse-node on elements to recurse in your view.

<div ng-controller="Ctrl">
    <div q-recurse="treeData">
            <li ng-repeat="childNode in treeData.children" q-recurse-node="childNode"></li>

Run your app, so you can get following html:


  • usr
  • lib
  • bin
  • var


  • q-recurse

This directive stands for starting recursion. Set "root" of your tree data to this attribute.

  • q-recurse-node

This directive stands for ending recursion. Set "next node" of your tree data to this attribute.
The element marked up this attribute must have a parent element marked up q-recurse attribute. It expands elements contained in the element maked up q-recurse into itself until "next node" data is null or undefined.

  • q-recurse-var

Set an alias recursive structure data.

<div q-recurse="someData.linkList" q-recurse-var="myLink">
  <div q-recurse-node=""></div>
$scope.someData = {
        name: 'first',
        next: {
            name: 'second',
            next: {
                name: 'last'
  • $depth

You can access recursion level in yout html using scope.$depth (e.g. $index in ng-repeat).

The following example limits the number of recursive expansion to 3 times.

<div q-recurse="linkData">
    Recursion level: {{$depth}}
    <div ng-if="$depth < 3" q-recurse-node=""></div>

Module stats last updated: 2015-04-19 11:33:19

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!