使用Angular生成动态bootstrap菜单

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

找到我的示例代码

P.S。我是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>

Editied plunkr是here。