Angular JS中动态菜单指令的问题
Issue With Dynamic menu directive in Angular JS
我正在使用angular 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)为什么my-menu标签被显示?
2)为什么在标签打印之前和标签被关闭?
还请找到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
的子节点)并呈现如下:
- 首页
- Home1
- 我震动
- 联系
- Contact1
- Contact2
Plnkr
所以作为你的两个问题的答案:
1)为什么my-menu标签被显示?
empty()会删除元素的CONTENTS,但它不会使你的元素化为虚无。此外,您的元素不会被替换,因为
template
属性或templateUrl
属性都没有提供模板,因此没有任何东西可以替换您的标记。
2)为什么在标签打印之前和标签被关闭?
你的标签被插入到错误的地方,因为你将奇怪的html节点添加到根html节点的
元素中end
中,而不是直接添加到前面添加的
您不允许添加<div>
元素作为<ul>
的子元素。
删除<div id="menu-button">Menu</div>
相关文章:
- 参数变量出现ngTable指令问题
- 表单提交问题,如何在我的URL末尾获得ID的值
- Angular Tour指令问题
- ASP MVC复选框表单提交问题
- JS表单验证问题
- 使用jQuery和Ajax表单提交问题
- Flexislider缩略图单击问题-中间问题
- IE9上的Jquery表单插件问题
- 正在删除单击问题上的活动类
- iPad悬停/单击问题
- JavaScript 将单引号替换为双单引号问题
- 活动选项卡单击问题
- 使用在浏览器地址栏中编写的JS代码自动提交表单的问题
- J查询日期选取器在动态创建日期选取器时出现单击问题
- 表单验证问题(Javascript)
- j查询表单发布问题
- 容器导航下拉列表的单击问题(需要双击才能下拉)
- jquery联系表单PHP问题
- ASP.NET C# 表单提交问题
- AngularJS动态表单和指令问题