我正在使用有角JS创建动态菜单。我的指令就像
restrict : 'EA',
replace : true,
scope :{menu : "=menu"},
compile: function(element, attributes) {
var linkFunction = function($scope, element, attributes){
element.empty();
element.append('<div id="cssmenu"><ul><div id="menu-button">Menu</div>');
for (i = 0;i<$scope.menu.length;i++){
element.append("<li class='has-sub'><a href='#'> <span>"+$scope.menu[i].name+"</span></a></li>");
}
element.append('</ul></div>');
}
return linkFunction;
}
我的HTML代码就像
<div ng-app="mainApp" ng-controller="MenuController">
<my-menu menu="menu"></my-menu>
</div>
我期望资源会像
<div id="cssmenu">
<ul>
<div id="menu-button">Menu</div>
<li class='has-sub'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>About</span></a></li>
</ul>
</div>
但是当前生成的就像
<my-menu menu="menu" class="ng-isolate-scope">
<div id="cssmenu">
<ul>
<div id="menu-button">Menu</div>
</ul>
</div>
<li class="has-sub"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Contact</span></a></li>
</my-menu>
我面临的问题
1)为什么我的菜单标签被显示?
2)为什么在打印标签之前将and标签关闭?
还请找到Plunker的链接
最佳答案
您将内容错误地附加到了元素上。您可以使用jQuery和jQuery lite将元素追加到元素中,这是angularjs附带的内容。您像字符串生成器一样使用它。这是可以按需工作的修改(从plnkr修改的代码):
var linkFunction = function($scope, e, attributes){
var element = angular.element('<ul />');;
for (i = 0;i<$scope.menu.length;i++){
var li = angular.element('<li><a href="#">'+$scope.menu[i].name+'</a></li>');
if($scope.menu[i].subList.length > 0 ){
var subList = angular.element('<ul />')
for(j=0;j<$scope.menu[i].subList.length;j++){
var subLi = angular.element('<li><a href="#">'+$scope.menu[i].subList[j].name+'</a></li>');
subList.append(subLi);
}
li.append(subList);
}
element.append(li);
}
e.replaceWith(element);
}
这将产生以下标记:
<div ng-app="MenuDirective" ng-controller="MenuController" class="ng-scope">
<ul>
<li>
<a href="#">Home</a>
<ul>
<li>
<a href="#">Home1</a>
</li>
<li>
<a href="#">Home2</a>
</li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li>
<a href="#">Contact1</a>
</li>
<li>
<a href="#">Contact2</a>
</li>
</ul>
</li>
</ul>
</div>
这是有效的html标记。 (您所需的输出不是由于
div
作为ul
的子项而产生的)并呈现如下:
家
首页1
家2
联系
联系人1
联系2
Plnkr
因此,作为您的2个问题的答案:
1)为什么我的菜单标签被显示?
2)为什么在打印标签之前将and标签关闭?