递归嵌套angularjs指令 [英] Nesting angularjs directives recursively
本文介绍了递归嵌套angularjs指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的应用程序中遇到了一个问题，我想要一个指令，在它的模板中，它应该有条件地决定是否在其中递归呈现相同的指令.我试图重新创建它，这个例子也不起作用.该指令未呈现且没有错误.然而，我本可以犯一个不同的错误.
I am having a problem in my application where I would like to have a directive, and inside its template it should conditionally decide whether to recursively render that same directive within it. I have tried to recreate it, and this example is also not working. The directive is not rendered and without errors. I could have made a different mistake in it however.
https://plnkr.co/edit/PhDvLZyWvyFThg57qZDV?p=preview
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>
menu-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: '='
}
};
});
推荐答案
您当前的指令实现基本上存在 3 个问题.
Basically there are 3 problems with your current directive implementation.
- 问题是您在
li元素上使用了replace: true指令，它再次添加了一个具有ul的模板.因此生成的 html 格式不正确，因为您不能再次将ul放入ul中.将您的指令replace: true更改为replace: false**OR 只需删除该选项即可.** - 你的指令模板
menu.Submenus应该是menu.SubMenus
- The problem is you had directive on
lielement withreplace: truewhich is adding one template which hasulagain. So resultant html was incorrect in format, as you can not haveulinsideulagain. Change you directivereplace: truetoreplace: false**OR just remove that option.** - There on your directive template
menu.Submenusshould bemenu.SubMenus
模板
<li ng-repeat="menu in menus">
{{menu.Text}}
<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>
这篇关于递归嵌套angularjs指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
