角度指令可以自称吗？

Question

我有一些 JSON 格式的示例数据：

{
  "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"}
  ]
}

我想构建一个与 JSON 结构相匹配的菜单树。于是我做了一个指令：

app.directive('menuItem',
function(){
    return {
        restrict : "E",
        scope: { data : '='},
        replace:true,
        templateUrl: 'directives/menu-item.html'
    };  
});

我将指令添加到我的 HTML 中，它适用于第一层：

<menu-item data="menu.data.menus"></menu-item>

我想要发生的是，如果指令使用的模型具有“子”属性，我希望它使用与自身相同的模板构建一个新节点：

<ul class="menu-items" ng-repeat="item in data">
    <li class="menu-item">
        <div>{{item.name}}</div>
        <div ng-if="item.children.length">
                    <!-- when I add this line I get problems -->
            <menu-item data="item.children"></menu-item>
        </div>
    </li>
</ul>

我收到以下错误：

错误：[$rootScope:inprog] http://errors.angularjs.org/1.3.0-beta.13/$rootScope/inprog?p0=%24digest

问题是，我如何才能获得所需的功能，以及我应该如何思考正在发生的事情才能更好地理解这一点？

小提琴来了...

Answer 1

好的，谢谢。是的，这实际上是How to handle recursive rendering of data using AngularJS 中提到的同一个问题

对于这种特殊情况，重要的是要提到，在目前的公式中，模板需要使用 "ng-init" 来正确递归。

<ul class="menu-items" ng-repeat="item in data">
    <li class="menu-item">
        <div>{{item.name}}</div>
        <div ng-include="'directives/menu-item.html'" ng-init="data = item.children" class="submenu-item"></div>
    </li>
</ul>