Currently struggling with a nested list Directive in Angular. Whenever I attempt to run the code, the browser crashes due to the recursive call of the directive.
My goal is to display a new list item if the data's children property contains items.
Here is a link to a fiddle of my code where I have removed the directive's self-call to prevent crashing the browser: http://jsfiddle.net/8p3bf4ec/
JS:
var jsonData = {
"title": "Home",
"author": "Mary",
"children": [
{
"title": "Clothing",
"author": "Robert",
"children": [
{
"title": "Shirts",
"author": "Bill",
"children": []
}
]
},
{
"name": "Electronics",
"author": "William",
"children": []
}
]
};
angular.module('myApp', []);
angular.module('myApp').directive('itemList', function() {
return {
scope: true,
templateUrl: 'itemListTemplate.html',
controller: function($scope) {
$scope.nodes = jsonData;
console.log($scope.nodes);
}
};
});
Template:
<div ng-app="myApp">
<item-list></item-list>
<script type="text/ng-template" id="itemListTemplate.html">
<ul>
<li ng-repeat="node in nodes">
{{node.title}}
</li>
</ul>
<!-- Removed this because it makes the browser crash
<item-list></item-list>
-->
</script>
</div>