Question

我必须创建一个动态菜单（基于数据）。我有像

这样的指示

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标签中提到的内容正如des所说。但我试图使用my-menu标签重新创建它们，但内容没有得到正确的显示。以下是结果的屏幕截图

为什么第二个家庭和联系人没有正常到来？

Answer 1

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

我猜您的css文件中有类似#cssmenu { ... }的内容，但它只会应用于id='cssmenu'的第一个元素

Angular JS的动态菜单问题

1 个答案: