Angular JS中的动态菜单指令问题

Posted 2023-03-06

技术标签:

【中文标题】Angular JS中的动态菜单指令问题【英文标题】：Issue With Dynamic menu directive in Angular JS 【发布时间】：2015-11-10 04:32:24 【问题描述】：

我正在使用 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) 为什么and标签在打印之前就关闭了？

也请找到Plunker的链接

【问题讨论】：

不确定您所看到的行为，但是我想知道您为什么使用编译功能而不是仅使用模板？我在这里没有看到任何简单模板无法处理的内容... 其实我需要一个动态创建模板的函数。 【参考方案1】：

您不能将<div> 元素添加为<ul> 的子元素。

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

【讨论】：

它不会改变任何东西【参考方案2】：

您将错误地附加到元素中。您可以使用 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

所以回答你的两个问题：

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