问题描述
我有我的应用程序的一个问题,我想有一个指令,它的模板内,应该有条件地决定是否递归呈现在它内部的相同指令。我试图重建它,这个例子也不能正常工作。该指令是不会呈现,并没有错误。我可以在它已经取得了不同的错误,但是。
的index.html
<!DOCTYPE HTML>
< HTML和GT; < HEAD>
&所述;脚本数据需要=angularjs@1.5.0数据semver =1.5.0SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular。 JS>< / SCRIPT>
<链接rel =stylesheet属性HREF =style.css文件/>
&所述; SCRIPT SRC =的script.js>&下; /脚本>
< /头> <机身NG-应用=应用程序NG控制器=MainCtrl>
< UL类=NAV导航栏,导航>
<李NG重复=菜单中的菜单>
<按钮类=BTN BTN-默认下拉曲肘式=键>
<跨度NG绑定=menu.Text>< / SPAN>
<跨度类=插入符号>< / SPAN>
< /按钮>
< UL类=下拉菜单中选择角色=菜单>
<李菜单项菜单=menu.SubMenus>< /李>
< / UL>
< /李>
< / UL>
< /身体GT;< / HTML>
菜单entry.html
<李NG重复=菜单中的菜单>
&下;一个纳克-如果=menu.Submenus.length === 0纳克绑定=menu.Text>&下; / A>
&所述按钮纳克-如果=menu.Submenus.length大于0类型=键纳克绑定=menu.Text>
<跨度类=插入符号插入符号向右>< / SPAN>
< /按钮>
&所述;微升纳克-如果=menu.Submenus.length大于0级=下拉菜单中选择角色=菜单>
<李菜单项菜单=menu.SubMenus>< /李>
< / UL>
< /李>
的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
模板
<李NG重复=菜单中的菜单>
{{menu.Text}}
&下;一个纳克-如果=menu.SubMenus.length == 0纳克绑定=menu.Text>&下; / A>
&所述按钮纳克-如果=menu.Submenus.length大于0类型=键纳克绑定=menu.Text>
<跨度类=插入符号插入符号向右>< / SPAN>
< /按钮>
&所述;微升纳克-如果=menu.SubMenus.length大于0级=下拉菜单中选择角色=菜单>
<李菜单项菜单=menu.SubMenus>< /李>
< / UL>
< /李>
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
li
element withreplace: true
which is adding one template which hasul
again. So resultant html was incorrect in format, as you can not haveul
insideul
again. Change you directivereplace: true
toreplace: false
**OR just remove that option.** - There on your directive template
menu.Submenus
should 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指令递归的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!