ifPager is experimental AngularJS directive which can be used as a hierarchical navigation or as an alternate to tree specially when you have large number of .
Currently ifPager uses bootstrap CSS so we need to link it first.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
Then add if-pager.js file after angluar.js.
<script src="js/lib/if-pager.js"></script>
Provide data using if-pager attribute and event handlers using if-handlers attribute.
With in your controller define both data and handlers on $scope or on this keyword if using controller as syntax.
module.controller('TestCtrl', function ($scope) {
$scope.handlers = [
function (d) {
console.log('level 0 - ' + d.title);
},
function (d) {
console.log('level 1 - ' + d.title);
},
function (d) {
console.log('level 2 - ' + d.title);
}
];
$scope.data = [
{
title: 'Root',
children: [
{
title: 'Item 1-1',
children: [
{title: 'Item 2-1'},
{
title: 'Item 2-2',
children: [
{title: 'Item 3-1'},
{title: 'Item 3-2'},
{title: 'Item 3-3'}
]
}
]
},
{title: 'Item 1-2'},
{title: 'Item 1-3'}
]
}
];
});