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>

我想要发生的是，如果该指令正在使用的模型有一个＆＃39;孩子＆＃39; property，我希望它使用与自身相同的模板构建一个新节点：

<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>

角度指令可以自称吗？

1 个答案: