AngularJS生成的嵌套列表的行为与预期不符
我有一个使用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 Directive，用于编译由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);
}
}
}]) ;
1 个答案:
答案 0 :(得分：2)
问题在于float: left;规则中的:before CSS属性。
float被转移到下一组。通过将clear: both;添加到ul li规则，您可以重置浮动。
ul li {
display: block ;
cursor:pointer;
animation-duration: 4s;
font-size: 12px;
clear: both;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？