I've received some JSON data in the following format:
{
"menus" : [
{"name" : "Item 1", "children" : [
{"name" : "Item 1.1", "url" : "http://www.website.com1/1"},
{"name" : "Item 1.2", "url" : "http://www.website.com1/2"},
{"name" : "Item 1.3", "children": [
{"name" : "Item 1.3.1", "url" : "http://www.website.com1/3/1"},
{"name" : "Item 1.3.2", "url" : "http://www.website.com1/3/2"},
{"name" : "Item 1.3.3", "url" : "http://www.website.com1/3/3"}
]}
]},
{"name" : "Item 2", "children": [
{"name" : "Item 2.1", "url" : "http://www.website.com2/1"},
{"name" : "Item 2.2", "url" : "http://www.website.com2/2"},
{"name" : "Item 2.3", "url" : "http://www.website.com2/3"}
]},
{"name" : "Item 3", "url" : "http://www.website.com3"}
]
}
To create a menu tree structure that mirrors the JSON, I decided to develop a directive for it:
app.directive('menuItem',
function(){
return {
restrict : "E",
scope: { data : '='},
replace:true,
templateUrl: 'directives/menu-item.html'
};
});
When implemented in the HTML using the directive, it functions correctly for the initial layer:
<menu-item data="menu.data.menus"></menu-item>
The goal is to have the directive generate new nodes if the model being used has a 'children' property, utilizing the same template:
<ul class="menu-items" ng-repeat="item in data">
<li class="menu-item">
<div>{{item.name}}</div>
<div ng-if="item.children.length">
<menu-item data="item.children"></menu-item>
</div>
</li>
</ul>
An error message pops up stating:
Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.0-beta.13/$rootScope/inprog?p0=%24digest
The question remains on how to achieve this desired functionality and gain a better understanding of what's happening.
Fiddle will be shared soon...