Javascript Angular JS中的动态菜单指令问题
我正在使用angular JS创建一个动态菜单。我的指令是Javascript Angular JS中的动态菜单指令问题,javascript,html,css,angularjs,angularjs-directive,Javascript,Html,Css,Angularjs,Angularjs Directive,我正在使用angular JS创建一个动态菜单。我的指令是 restrict : 'EA', replace : true, scope :{menu : "=menu"}, compile: function(element, attributes) { var linkFunction = function($scope, element, attributes){ element.empty(); element.append
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;
}
<div ng-app="mainApp" ng-controller="MenuController">
<my-menu menu="menu"></my-menu>
</div>
restrict:'EA',
替换:正确,
作用域:{menu:'=menu},
编译:函数(元素、属性){
var linkFunction=函数($scope,element,attributes){
元素。empty();
元素追加(“菜单”);
对于(i=0;i您不允许从
添加元素作为子元素
删除菜单
您在元素中添加的内容不正确。您使用jQuery和jQuery lite将元素添加到元素中,这是angularjs中包含的内容。您使用它就像使用字符串生成器一样。以下是根据需要进行的修改(从plnkr修改代码):
var linkFunction=function($scope,e,attributes){
var element=angular.element(“
”);;
对于(i=0;i=0){
var subList=angular.element(“
”)
对于(j=0;jit不会改变任何东西不确定您看到的行为,但是我想知道为什么您使用编译函数而不是仅使用模板?我没有看到简单模板无法处理的任何事情…实际上我需要一个动态创建模板的函数。
<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>
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>