javascript - 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
  • > 主页2
• > 接触
  • > 联系人1
  • > 联系人2

Plnkr

作为对您的 2 个问题的回答:

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

empty() removes the CONTENTS of your element, it doesn't make your element into nothing. Also, your element isn't replaced because there is no template supplied either by template property or by templateUrl property and thus there is nothing to replace your tag with.

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

Your tags are getting inserted in the wrong places because you're adding strange html nodes to the end of your root html node, not directly into the previous element you appended