Angular JS 的动态菜单问题答案

【问题标题】：Dynamic Menu Issue with Angular JSAngular JS 的动态菜单问题
【发布时间】：2015-08-17 21:35:45
【问题描述】：

我必须创建一个动态菜单（基于数据）。我有我的指令，比如

var mainApp = angular.module("mainApp", []);

    mainApp.directive('myMenu',function(){
        return {
            restrict : 'EA',
            replace : true,
            scope :{menu : "=menu"},
            compile: function(element, attributes) {
                var linkFunction = function($scope, element, attributes){
                    element.empty();
                    for (i = 0;i<$scope.menu.length;i++){
                        element.append("<li class='has-sub'><a href='#'><span>"+$scope.menu[i].name+"</span></a></li>");
                    }
                }
                return linkFunction;
            }

        }
    });   
      mainApp.controller('MenuController', function($scope) {
          $scope.menu = [];
          var home = {name:"Home", subList:[{name:"Home1"},{name:"Home2"}]};
          var contact = {name:"Contact", subList:[{name:"Contact1"},{name:"Contact2"}]};
          $scope.menu.push(home);
          $scope.menu.push(contact);
      });

我的 HTML 文件是

<div  ng-app="mainApp" ng-controller="MenuController">
        <div id='cssmenu'>
        <ul>
            <li class='has-sub'><a href='#'><span>Home</span></a></li>
            <li class='has-sub'><a href='#'><span>About</span></a></li>
        </ul>
        </div>
        <div id='cssmenu'>
        <ul>
            <my-menu menu="menu"></my-menu>
        </ul>
        </div>
    </div>

这里 li 标签中提到的内容按设计正确。但我正在尝试使用 my-menu 标签重新创建它们，但内容没有正确显示。下面是结果截图

为什么第二个家和联系不正常？

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

您的 html 文档中不能有两次 id='cssmenu'。

我猜你的css文件中有#cssmenu { ... }之类的东西，但它只会应用于id='cssmenu'的第一个元素

【讨论】：

即使我只有一个 id='cssmenu' 也是一样的。