使用ng-repeat渲染嵌套指令时出错

时间:2016-03-21 21:08:26

标签: javascript angularjs angularjs-directive

我自己在这里提出这个问题:

Nesting angularjs directives recursively

并解决了初始问题,然而,似乎有一个奇怪的错误。

代码在这里:

https://plnkr.co/edit/PhDvLZyWvyFThg57qZDV?p=preview

在其中调用指令时,双ng-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
        1.3.2
        1.3.3
2
    2.1
        2.1.1
        2.1.2
        2.1.3
    2.2
        2.2.1
        2.2.2
        2.2.3
    2.3
        2.3.1
        2.3.2
        2.3.3

但是出现了:

1
2
    2.1
    2.2
    2.3
        2.3.1
        2.3.2
        2.3.3
        2.2.1
        2.2.2
        2.2.3
        2.1.1
        2.1.2
        2.1.3
        1.3.1
        1.3.2
        1.3.3
        1.2.1
        1.2.2
        1.2.3
        1.1.1
        1.1.2
        1.1.3
    1.1
    1.2
    1.3

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

菜单-entry.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>

的script.js

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.menus = [
    { Text: '1', SubMenus: [
      { Text: '1.1', SubMenus: [{Text:'1.1.1',SubMenus:[]},{Text:'1.1.2',SubMenus:[]},{Text:'1.1.3',SubMenus:[]}]},
      { Text: '1.2', SubMenus: [{Text:'1.2.1',SubMenus:[]},{Text:'1.2.2',SubMenus:[]},{Text:'1.2.3',SubMenus:[]}]},
      { Text: '1.3', SubMenus: [{Text:'1.3.1',SubMenus:[]},{Text:'1.3.2',SubMenus:[]},{Text:'1.3.3',SubMenus:[]}]}
      ]},
    { Text: '2', SubMenus: [
    { Text: '2.1', SubMenus: [{Text:'2.1.1',SubMenus:[]},{Text:'2.1.2',SubMenus:[]},{Text:'2.1.3',SubMenus:[]}]},
    { Text: '2.2', SubMenus: [{Text:'2.2.1',SubMenus:[]},{Text:'2.2.2',SubMenus:[]},{Text:'2.2.3',SubMenus:[]}]},
    { Text: '2.3', SubMenus: [{Text:'2.3.1',SubMenus:[]},{Text:'2.3.2',SubMenus:[]},{Text:'2.3.3',SubMenus:[]}]}
    ]},
    ];
});

app.directive('menuEntry', function() {
        var cFn = ['$scope', function ($scope) {

        }];

        var lFn = function (scope, element, attr, ctrl, transclude) {
        };

        return {
            restrict: 'A',
            replace: true,
            templateUrl: 'menu-entry.html',
            controller: cFn,
            link: lFn,
            scope: {
                menus: '='
            }
        };
});

1 个答案:

答案 0 :(得分:3)

移动菜单条目指令之外的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>