AngularJS - 递归指令不起作用（无限循环）答案

【问题标题】：AngularJS - Recursive directive not working (infinite loop)AngularJS - 递归指令不起作用（无限循环）
【发布时间】：2015-11-13 14:30:09
【问题描述】：

我需要创建一个能够处理多个（不是确切数量）级别的子菜单的菜单

MainMenu.js（包含所有菜单项的菜单属性）

class MainMenu {

    // @ngInject
    constructor() {


        this.menu = {
            name: 'Main menu',
            list: [
               {
                name: 'Sub menu lvl 1',
                list: [
                    {
                     name: 'Sub menu lvl 2',
                     list: [
                        {
                         name: 'Sub menu lvl 3'
                        } 
                     ]
                    }
                ]
               } 
            ]
        }



    }
}

export default function () {
    return {
        scope: {},
        templateUrl: 'path/to/MainMenu.tpl.html',
        replace: true,
        controller: MainMenu,
        controllerAs: 'mainMenuCtrl'
    };
};

这是模板html文件（MainMenu.tpl.html）

<div>
    <nav id="menu" class="cm-menuwrapper">
        <ul class="cm-menu">
            <li ng-repeat="menuItem in mainMenuCtrl.menu.list">
                <a class="cursor-pointer" ng-click="mainMenuCtrl.someMethod(menuItem)"><span>{{menuItem.name}}</span></a>
                <sub-menu menu-item="menuItem" ng-if="menuItem.list"></sub-menu>
            </li>
        </ul>
    </nav>
</div>

SubMenu.js

class SubMenu {

    // @ngInject
    constructor() {

    }


}

export default function () {
    return {
        scope: {},
        templateUrl: 'path/to/SubMenu.tpl.html',
        replace: true,
        controller: SubMenu,
        controllerAs: 'subMenuCtrl',
        bindToController: {
            menuItem : "="
        }
    };
};

子菜单html模板文件（SubMenu.tpl.html）

<ul class="cm-submenu">
    <li ng-repeat="submenu in subMenuCtrl.menuItem.list" ng-class="submenu.itemClass">
        <a class="cursor-pointer" ng-click="subMenuCtrl.someMethod(submenu)"><span>{{submenu.name}}</span></a>
        <sub-menu menu-item="submenu" ng-if="submenu.list"></sub-menu>
    </li>
</ul>

如您所见，我已将 <sub-menu ....> 指令放入 SubMenu.tpl.html 中，这似乎导致某种无限循环。浏览器卡在空白页面，消耗内存和cpu。

对这个问题有什么建议吗？

【问题讨论】：

递归指令必须使用$compile。

标签： javascript angularjs angularjs-directive ecmascript-6

【解决方案1】：

您必须在 Angular 的初始编译中隐藏您的子指令。在链接函数中动态添加递归子菜单。这里是修改后的 SubMenu.js：

/* @ngInject */ 
function submenuDirective($compile) {
  return {
    scope: {},
    templateUrl: 'path/to/SubMenu.tpl.html',
    replace: true,
    controller: SubMenu,
    controllerAs: 'subMenuCtrl',
    bindToController: {
        menuItem : "="
    },
    link: function(scope, elm) {
       const submenuNode = elm.find('.cm-submenu-list');
       submenuNode.append('<sub-menu menu-item="submenu" ng-if="submenu.list"></sub-menu>');
       $compile(submenuNode)(scope);
    }
  };
};

并且不要忘记在模板中添加包装器：

<ul class="cm-submenu">
  <li ng-repeat="submenu in subMenuCtrl.menuItem.list" ng-class="submenu.itemClass">
    <a class="cursor-pointer" ng-click="subMenuCtrl.someMethod(submenu)"><span>{{submenu.name}}</span></a>
    <!-- submenu items will be rendered here later -->
    <div class="cm-submenu-list"></div>
  </li>
</ul>

【讨论】：