Angular JS

Question

我正在使用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

的链接

Answer 1

您正在向元素添加错误的内容。使用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                     
                      
  •                         HOME2                     
                  
              
            
•                 联系                 
                      
  •                         Contact1                     
                      
  •                         Contact2                     
                  
              
        

    

Plnkr

作为你的两个问题的答案：

1）为什么my-menu标签会显示？

  

empty()删除元素的内容，它不会使你的元素   元素无所作为。此外，您的元素未被替换，因为template属性或templateUrl属性没有提供模板，因此没有任何内容可以替换您的标记。

2）为什么在打印标签之前关闭和标签？

  

你的标签插入错误的地方是因为你   将奇怪的html节点添加到根html节点的end，而不是直接添加到您附加的前一个元素

Answer 2

您不能从<div>添加<ul>元素作为子元素。

删除<div id="menu-button">Menu</div>