Angular Bootstrap 3导航栏子菜单将不会触发

Question

我有Angular 1.2.1和Bootstrap 3.0.2

带有下拉菜单的普通香草导航菜单效果很好，但是当我尝试使用ng-repeat生成菜单时，子菜单将不会触发。

HTML：

            <ul class="nav navbar-nav" ng-repeat="data in main_menu">
                <li ng-class="{'dropdown' : data.nodes}">
                  <a href="{{data.link}}" ng-class="{'dropdown-toggle' : data.nodes}">{{data.name}} <b class="caret" ng-if="data.nodes"></b>
                  <ul ng-if="data.nodes" ng-repeat="items in data.nodes" class="dropdown-menu">
                      <li><a href="{{items.link}}">{{items.name}}</a></li>
                  </ul>
                </li>
            </ul>

在控制器中：

$scope.main_menu = [
  {
    name: 'Home',
    class: '',
    link: '/',
    nodes: false
  },
  {
    name: "DropDown",
    class: 'dropdown-toggle',
    link: '#',
    nodes: [
      {
        name: "Node2",
        class: '',
        link: 'link'
      },
      {
        name: "Node2",
        class: '',
        link: 'link'
      },
      {
         name: "Node2",
         class: '',
         link: 'link'
      },
      {
         name: "Node2",
         class: '',
         link: 'link'
      }
    ]
  }

 ];

正常的bootstrap html子菜单功能正常..有什么建议吗？

经过检查..

Angular html块不正确，通过此调整它可以呈现正确的html-下拉菜单仍然无法正常工作

            <ul class="nav navbar-nav" >
                <li ng-repeat="data in main_menu" ng-class="{'dropdown' : data.nodes}">
                  <a href="{{data.link}}" ng-class="{'dropdown-toggle' : data.nodes}">{{data.name}} <b class="caret" ng-if="data.nodes"></b></a>
                  <ul ng-if="data.nodes"  class="dropdown-menu">
                      <li ng-repeat="items in data.nodes"><a href="{{items.link}}">{{items.name}}</a></li>
                  </ul>
                </li>
            </ul>

Answer 1

两步：

1. 为链接添加attr data-toggle="dropdown" 。

2. 更新控制器，将link: '#'更改为link: '' 。