我有一个使用 JavaScript 以编程方式生成并使用 AngularJS 功能部署的多级列表。
HTML 是:
<style>
ul {
animation-duration: 4s;
padding-left: 20px;
}
ul li {
display: block ;
cursor:pointer;
animation-duration: 4s;
font-size: 12px;
}
li.groupCollapsed {
font-weight: bold;
}
li.groupExpanded {
font-weight: bold;
font-style: italic;
}
li.groupCollapsed:before {
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 12px;
float: left;
margin-top: 4px;
margin-left: -17px;
color: blue;
}
li.groupExpanded:before {
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e114";
font-family: 'Glyphicons Halflings';
font-size: 12px;
float: left;
margin-top: 4px;
margin-left: -17px;
color: red;
}
</style>
<compile-Directive id="cmpldirective" content="Commands_Tree_Contents"></compile-Directive>
其中 compile-Directive 是一个 Angular 指令，用于编译由 JavaScript 生成的 HTML。这完美地工作并生成以下内容:
生成这个的整个代码是:
$rootScope.Commands_Tree = JSON.parse (
'[ ' +
' {"Type":"Group","Name":"Group_1","Contents": ' +
' [ ' +
' {"Type":"Command","Name":"Command_1_1","Action":"Do_1_1"}, ' +
' {"Type":"Command","Name":"Command_1_2","Action":"Do_1_2"}, ' +
' {"Type":"Command","Name":"Command_1_3","Action":"Do_1_3"}, ' +
' {"Type":"Command","Name":"Command_1_4","Action":"Do_1_4"}, ' +
' {"Type":"Group" ,"Name":"Group_1_5","Contents": ' +
' [ ' +
' {"Type":"Command","Name":"Command_1_5_1","Action":"Do_1_5_1"}, ' +
' {"Type":"Command","Name":"Command_1_5_2","Action":"Do_1_5_2"}, ' +
' {"Type":"Command","Name":"Command_1_5_3","Action":"Do_1_5_3"}, ' +
' {"Type":"Command","Name":"Command_1_5_4","Action":"Do_1_5_4"}, ' +
' {"Type":"Group" ,"Name":"Group_1_5_5","Contents": ' +
' [ ' +
' {"Type":"Command","Name":"Command_1_5_5_1","Action":"Do_1_5_5_1"}, ' +
' {"Type":"Command","Name":"Command_1_5_5_2","Action":"Do_1_5_5_2"}, ' +
' {"Type":"Command","Name":"Command_1_5_5_3","Action":"Do_1_5_5_3"}, ' +
' {"Type":"Command","Name":"Command_1_5_5_4","Action":"Do_1_5_5_4"} ' +
' ] ' +
' } ' +
' ] ' +
' } ' +
' ] ' +
' }, ' +
' {"Type":"Group","Name":"Group_2","Contents": ' +
' [ ' +
' {"Type":"Command","Name":"Command_2_1","Action":"Do_2_1"}, ' +
' {"Type":"Command","Name":"Command_2_2","Action":"Do_2_2"}, ' +
' {"Type":"Command","Name":"Command_2_3","Action":"Do_2_3"}, ' +
' {"Type":"Command","Name":"Command_2_4","Action":"Do_2_4"}, ' +
' {"Type":"Group" ,"Name":"Group_2_5","Contents": ' +
' [ ' +
' {"Type":"Command","Name":"Command_2_5_1","Action":"Do_2_5_1"}, ' +
' {"Type":"Command","Name":"Command_2_5_2","Action":"Do_2_5_2"}, ' +
' {"Type":"Command","Name":"Command_2_5_3","Action":"Do_2_5_3"}, ' +
' {"Type":"Command","Name":"Command_2_5_4","Action":"Do_2_5_4"}, ' +
' {"Type":"Group" ,"Name":"Group_2_5_5","Contents": ' +
' [ ' +
' {"Type":"Command","Name":"Command_2_5_5_1","Action":"Do_2_5_5_1"}, ' +
' {"Type":"Command","Name":"Command_2_5_5_2","Action":"Do_2_5_5_2"}, ' +
' {"Type":"Command","Name":"Command_2_5_5_3","Action":"Do_2_5_5_3"}, ' +
' {"Type":"Command","Name":"Command_2_5_5_4","Action":"Do_2_5_5_4"} ' +
' ] ' +
' } ' +
' ] ' +
' } ' +
' ] ' +
' } ' +
'] '
) ;
$scope.Act_On = function(p_Action) {
console.log("Requested actions is: " + p_Action) ;
}
$scope.Expand_Collapse = function(p_Element) {
var l_Element = document.getElementById(p_Element) ;
var l_Sub_Menu = l_Element.childNodes[1].childNodes ;
var l_i ;
var l_One_Sub ;
hasClass = function ( elem, klass ) {
return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}
if ( $('#' + p_Element).hasClass('groupExpanded') ) {
$('#' + p_Element).removeClass('groupExpanded');
$('#' + p_Element).addClass('groupCollapsed');
if(l_Sub_Menu.length > 0) {
for (l_i = 0 ; l_i < l_Sub_Menu.length ; l_i++) {
l_One_Sub = l_Sub_Menu[l_i] ;
if ( hasClass(l_One_Sub,'show') ) {
l_One_Sub.classList.remove("show");
l_One_Sub.classList.add("hide");
}
}
}
} else {
$('#' + p_Element).addClass('groupExpanded');
$('#' + p_Element).removeClass('groupCollapsed');
if(l_Sub_Menu.length > 0) {
for (l_i = 0 ; l_i < l_Sub_Menu.length ; l_i++) {
l_One_Sub = l_Sub_Menu[l_i] ;
if ( hasClass(l_One_Sub,'hide') ) {
l_One_Sub.classList.remove("hide");
l_One_Sub.classList.add("show");
}
}
}
} ;
} ;
Build_Commands_Tree = function (p_Start_Tree) {
var i ;
var Tempo = '<ul>' ;
for (i=0;i<p_Start_Tree.length;i++) {
if (p_Start_Tree[i].Type == "Command") {
Tempo = Tempo + '<li class="show" id="' + p_Start_Tree[i].Name + '" ng-click="Act_On(\'' + p_Start_Tree[i].Action + '\'); $event.stopPropagation();">' + p_Start_Tree[i].Name + "</li>" ;
}
else {
Tempo = Tempo + '<li id="' + p_Start_Tree[i].Name + '" class="groupExpanded show" ng-click="Expand_Collapse(\'' + p_Start_Tree[i].Name + '\'); $event.stopPropagation();">' + p_Start_Tree[i].Name ;
Tempo = Tempo + Build_Commands_Tree(p_Start_Tree[i].Contents) ;
Tempo= Tempo + "</li>" ;
}
}
return Tempo + "</ul>"
}
$scope.Commands_Tree_Contents = Build_Commands_Tree($rootScope.Commands_Tree) ;
当我开始折叠子菜单时出现错误行为；例如，如果我单击 Group_1_5，树将变为如下所示:
如图所示，Group_2 显示为缩进，但它应与 Group_1 对齐。如果我折叠整个 Group_1，两者都会正确显示(页面左侧的缩进相同。
我不知道生成的 HTML 有什么问题。
编辑
编译指令如下:
.directive('compileDirective', ['$compile', '$parse' , function($compile, $parse) {
return {
restrict: 'E',
link: function(scope, element, attr) {
scope.$watch(attr.content, function() {
element.html($parse(attr.content)(scope));
$compile(element.contents())(scope);
}, true);
}
}
}]) ;
最佳答案
问题出在 :before 规则中的 float: left; CSS 属性。
float 被带入下一组。通过将 clear: both; 添加到 ul li 规则，您可以重置 float 。
ul li {
display: block ;
cursor:pointer;
animation-duration: 4s;
font-size: 12px;
clear: both;
}
关于javascript - AngularJS 生成的嵌套列表的行为不符合预期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43389845/