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: '' 。