Javascript 使用ng repeat呈现嵌套指令时出错_Javascript_Angularjs_Angularjs Directive

Javascript 使用ng repeat呈现嵌套指令时出错

javascript angularjs

Javascript 使用ng repeat呈现嵌套指令时出错,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我在这里问了这个问题：最初的问题解决了，但是，似乎有一个奇怪的错误代码如下：当在其中调用指令时，doubleng repeat似乎被破坏。所有数据都在一个元素上呈现。我猜我要么犯了一个错误，要么这与将项目推入摘要周期的顺序有关。结构应为： 1 1.1 1.1.1 1.1.2 1.1.3 1.2 1.2.1 1.2.2 1.2.3 1.3 1.3.1

我在这里问了这个问题：

最初的问题解决了，但是，似乎有一个奇怪的错误

代码如下：

当在其中调用指令时，double

ng repeat

似乎被破坏。所有数据都在一个元素上呈现。我猜我要么犯了一个错误，要么这与将项目推入摘要周期的顺序有关。结构应为：

但结果是：

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="MainCtrl">
    <ul class="nav navbar-nav">
      <li ng-repeat="menu in menus">
        <button class="btn btn-default dropdown-toggle" type="button">
          <span ng-bind="menu.Text"></span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li menu-entry menus="menu.SubMenus"></li>
        </ul>
      </li>
    </ul>
  </body>

</html>

<li ng-repeat="menu in menus">
    <a ng-if="menu.SubMenus.length===0" ng-bind="menu.Text"></a>
    <button ng-if="menu.SubMenus.length>0" type="button" ng-bind="menu.Text">
        <span class="caret caret-right"></span>
    </button>
    <ul ng-if="menu.SubMenus.length>0" class="dropdown-menu" role="menu">
        <li menu-entry menus="menu.SubMenus"></li>
    </ul>
</li>

移动菜单项指令外的ul，并将其放入指令模板内。模板应如下所示：

<ul>
<li ng-repeat="menu in menus">
    <a ng-if="menu.SubMenus.length===0" ng-bind="menu.Text"></a>
    <button ng-if="menu.SubMenus.length>0" type="button" ng-bind="menu.Text">
        <span class="caret caret-right"></span>
    </button>
    <ul ng-if="menu.SubMenus.length>0" class="dropdown-menu" role="menu">
        <li menu-entry menus="menu.SubMenus"></li>
    </ul>
</li>
</ul>

为什么您仍然保留

replace:true

任何特殊原因？最好包含一个plunkr，以便于调试，但也要始终在问题中包含相关代码。这是因为一个问题必须是自包含的：这个链接可能在将来某个时候断开。@PankajParkar，因为这样你就会有ul>li>li。替换为ul>li@wvdz补充。谢谢你的建议。我不确定在添加长代码示例时，什么是最佳实践，因为有时它可能会阻止人们在一眼看上去太复杂时回答。非常感谢，但在我将此标记为答案之前，您是否能够添加原始代码的问题以及为什么会这样？原始代码的问题是，生成的DOM具有ul>li>li的嵌套结构，而不仅仅是ul>li。将

<ul>
<li ng-repeat="menu in menus">
    <a ng-if="menu.SubMenus.length===0" ng-bind="menu.Text"></a>
    <button ng-if="menu.SubMenus.length>0" type="button" ng-bind="menu.Text">
        <span class="caret caret-right"></span>
    </button>
    <ul ng-if="menu.SubMenus.length>0" class="dropdown-menu" role="menu">
        <li menu-entry menus="menu.SubMenus"></li>
    </ul>
</li>
</ul>