javascript - 使用 Angular 生成动态引导菜单

Question

我正在尝试使用 Angular 动态创建引导导航栏菜单。

菜单的源数据来自json，如下所示:

{   
"Menu": [
    {
        "title": "Individual",
        "url": "#",
        "subMenu": [{
            "title": "Individual Address",
            "url": "http://www.w3schools.com/html/default.asp",
            "subMenu": []
          }]
    },
    {
        "title": "Organisation",
        "url": "#",
        "subMenu": [{
            "title": "Organisation Address",
            "url": "http://www.w3schools.com/html/default.asp",
            "subMenu": []
        },{
            "title": "Organisation Contact",
            "url": "http://www.w3schools.com/html/default.asp",
            "subMenu": []
        },{
            "title": "Organisation Sector",
            "url": "http://www.w3schools.com/html/default.asp",
            "subMenu": []
        }]
    },

    {
        "title": "Return",
        "url": "http://www.w3schools.com/js/default.asp",
        "subMenu": []
    }
]
}

正如您所看到的，有嵌套项目，因此我们需要在导航栏中有下拉菜单。

我创建了一个指令来生成动态菜单(我使用了 here 找到的指令作为起点)。该指令的修改版本如下所示:

app.directive('tree', function ($compile) {
    return {
        restrict: 'E',
        terminal: true,
        scope: { val: '=', parentData:'=' },
        link: function (scope, element, attrs) {

          if (scope.val.subMenu !== undefined && scope.val.subMenu.length > 0) {
                template =      '<li class="dropdown"> '+
                              '  <a class="dropdown-toggle" data-toggle="dropdown" href="{{val.url}}">{{val.title}} '+
                              '  <span class="caret"></span></a> '+
                              '  <ul class="dropdown-menu"> '+
                              '   <div ng-repeat="item in val.subMenu"> '+
                              '     <tree val="item" parent-data="val.subMenu"></tree> '+
                              '   </div>'
                              '  </ul> '+
                              '</li> ';
            }
            else
            {
              template = '<li><a href="{{val.url}}">{{val.title}}</a></i> ';
            }
            var newElement = angular.element(template);
            $compile(newElement)(scope);
            element.replaceWith(newElement);            
        }
    }

下面是我使用此指令的 html 代码

<div class="container">
  <div class="row">
    <nav class="navbar navbar-default">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <div ng-repeat="menu in menuFamily.Menu">
            <tree val="menu"></tree>
          </div>
        </ul>
      </div>
    </nav>
  </div>
</div>

菜单已生成，但由于我使用 div 标签进行 ng-repeat，因此菜单未正确呈现。但是，如果我从生成的 html 中删除 div 标记，则一切正常。所以我的问题是，如何在不使用 div 标签的情况下实现我想要的目标。

您还可以在 plunker 找到我的示例代码

附注我是 Angular 世界的新手，并且对指令有非常基本的了解。

Answer 1

如果我正确理解您的问题，您需要做两件事:

正确使用ng-repeat

ng-repeat 可以直接应用于您的 tree 指令。改变

<div ng-repeat="...">
    <tree ...>
</div>

至

<tree ng-repeat="..." />

在您的 html 文件和指令的 template 属性中。

这会将正确的样式应用于您的菜单。

导入 Bootstrap js 并初始化下拉菜单

因为 Angular 会修改 DOM 以添加下拉列表的 HTML，所以添加下拉列表后您需要手动初始化它们。

添加元素后调用 $('.dropdown-toggle').dropdown()。

没关系，只需在页面中添加 Bootstrap JS 即可，看起来它会自行正确初始化。

<script src="http://code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery@*"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

编辑后的plunkr是here .