我自己在这里提出这个问题:
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: '='
}
};
});
答案 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>