Skip to content

Instantly share code, notes, and snippets.

@tejpratap46
Created July 25, 2016 06:58
Show Gist options
  • Save tejpratap46/7c6f607b9a109165f5f03e7668118331 to your computer and use it in GitHub Desktop.
Save tejpratap46/7c6f607b9a109165f5f03e7668118331 to your computer and use it in GitHub Desktop.
Nested comments in Angular 1.x
angular.module('APP', [])
.directive('collection', function () {
return {
restrict: "E",
replace: true,
scope: {
collection: '='
},
template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
}
})
.directive('member', function ($compile) {
return {
restrict: "E",
replace: true,
scope: {
member: '='
},
template: "<li>{{member.name}}</li>",
link: function (scope, element, attrs) {
if (angular.isArray(scope.member.children)) {
element.append("<collection collection='member.children'></collection>");
$compile(element.contents())(scope)
}
}
}
})
.controller('IndexCtrl', function ($scope) {
$scope.tasks = [
{
name: 'Europe',
children: [
{
name: 'Italy',
children: [
{
name: 'Rome'
},
{
name: 'Milan'
}
]
},
{
name: 'Spain'
}
]
},
{
name: 'South America',
children: [
{
name: 'Brasil'
},
{
name: 'Peru'
}
]
}
];
});
<!doctype html>
<html ng-app='APP'>
<head>
<meta name="description" content="Angular Nested recursive directives" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="IndexCtrl">
<collection collection='tasks'></collection>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment