【发布时间】：2017-04-13 10:29:46
【问题描述】：
我有一个使用 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);
}
}
}]) ;
【问题讨论】：
-
在 plunker 或这里用 sn-p 创建一个可播放的示例？
-
我尝试在 plunker 中重现您的代码，但没有您的
compile-Directive的代码，我无法让可折叠行为工作，也无法真正测试我的理论。但是，我怀疑您的折叠逻辑可能会影响您的</li>和/或</ul>元素。 -
@Claies，我添加了指令的代码。至于你的预感，我猜你是对的，但找不到错误在哪里或我做错了什么。
-
嗯，好的，所以您的指令正在构建一个包含 jQuery 函数的动态内容树？即使复制所有内容，我仍然没有得到箭头或折叠行为。
-
好的，我终于得到了一个带有代码和引导程序的 plunker，我现在要看看它。 plnkr.co/edit/BF8SQMPZxhyj1Ni6BLvR?p=preview
标签： javascript html css angularjs twitter-bootstrap