嵌套angularjs指令递归 [英] Nesting angularjs directives recursively
本文介绍了嵌套angularjs指令递归的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有我的应用程序的一个问题，我想有一个指令，它的模板内，应该有条件地决定是否递归呈现在它内部的相同指令。我试图重建它，这个例子也不能正常工作。该指令是不会呈现，并没有错误。我可以在它已经取得了不同的错误，但是。
https://plnkr.co/edit/PhDvLZyWvyFThg57qZDV?p=$p$ PVIEW
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT; ＆LT; HEAD＆GT;
＆所述;脚本数据需要=angularjs@1.5.0数据semver =1.5.0SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular。 JS＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT; ＆LT;机身NG-应用=应用程序NG控制器=MainCtrl＆GT;
＆LT; UL类=NAV导航栏，导航＆GT;
＆LT;李NG重复=菜单中的菜单＆GT;
＆LT;按钮类=BTN BTN-默认下拉曲肘式=键＆GT;
＆LT;跨度NG绑定=menu.Text＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=插入符号＆GT;＆LT; / SPAN＆GT;
＆LT; /按钮＆GT;
＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
＆LT;李菜单项菜单=menu.SubMenus＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
菜单entry.html
＆LT;李NG重复=菜单中的菜单＆GT;
＆下;一个纳克-如果=menu.Submenus.length === 0纳克绑定=menu.Text＆GT;＆下; / A＆GT;
＆所述按钮纳克-如果=menu.Submenus.length大于0类型=键纳克绑定=menu.Text＆GT;
＆LT;跨度类=插入符号插入符号向右＆GT;＆LT; / SPAN＆GT;
＆LT; /按钮＆GT;
＆所述;微升纳克-如果=menu.Submenus.length大于0级=下拉菜单中选择角色=菜单＆GT;
＆LT;李菜单项菜单=menu.SubMenus＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
的script.js
VAR应用= angular.module（'应用'，[]）;app.controller（'MainCtrl'，函数（$范围）{
$ scope.menus = [
{文字：'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，子菜单：[]}]}
]}，
];
}）;app.directive（'menuEntry'，函数（）{
VAR CFN = ['$范围'，函数（$范围）{ }]; VAR LFN =功能（范围，元素，属性，CTRL transclude）{
}; 返回{
限制：'A'，
更换：真实，
templateUrl：'菜单entry.html'，
控制器：CFN，
链接：LFN，
范围： {
菜单：'='
}
};
}）;
解决方案
基本上有三个问题与您当前的指令执行。
- 现在的问题是，你有指令的
里与元素替换：真正的这是添加有一个模板UL一次。因此产生的HTML是不正确的格式，因为你不能有UL在UL一次。 更改您的指令更换：真正的到更换：假**或只是删除选项** - 有你的指令模板
menu.Submenus应menu.SubMenus
模板
＆LT;李NG重复=菜单中的菜单＆GT;
{{menu.Text}}
＆下;一个纳克-如果=menu.SubMenus.length == 0纳克绑定=menu.Text＆GT;＆下; / A＆GT;
＆所述按钮纳克-如果=menu.Submenus.length大于0类型=键纳克绑定=menu.Text＆GT;
＆LT;跨度类=插入符号插入符号向右＆GT;＆LT; / SPAN＆GT;
＆LT; /按钮＆GT;
＆所述;微升纳克-如果=menu.SubMenus.length大于0级=下拉菜单中选择角色=菜单＆GT;
＆LT;李菜单项菜单=menu.SubMenus＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
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: '='
}
};
});
解决方案
Basically there are 3 problems with your current directive implementation.
- 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
Template
<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屋！
查看全文
