AngularJS中Bootstrap下拉子菜单无法显示的问题求助

我来帮你搞定这个下拉子菜单的问题，结合你的代码和Bootstrap的特性，这几个调整点应该能解决问题：

1. 修正子菜单的AngularJS循环结构 #

你现在把ng-repeat放在了<ul class="dropdown-menu">标签上，这会导致每一个游戏项都生成一个独立的下拉菜单容器，而不是在同一个子菜单里展示所有游戏。正确的做法是把ng-repeat移到<li>标签上：

<li class="dropdown-submenu">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Games</a>
  <ul class="dropdown-menu">
    <li class="dropdown-item" ng-repeat="game in games" ng-click="getGames()">
      {{game.name}}
    </li>
  </ul>
</li>

2. 处理Bootstrap的子菜单支持（关键） #

从Bootstrap 3开始，框架已经不再默认提供下拉子菜单的样式和交互支持，所以你需要添加自定义CSS来让子菜单正常显示。如果希望通过hover触发子菜单，添加这段CSS：

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: 0 6px 6px 6px;
  display: none;
}

.dropdown-submenu:hover .dropdown-menu {
  display: block;
}

如果需要点击触发子菜单（更适合移动端），除了上面的CSS，还要添加一段AngularJS的事件处理代码：

// 在你的AngularJS控制器里添加
$('.dropdown-submenu a.dropdown-toggle').on('click', function(e) {
  $(this).next('.dropdown-menu').toggle();
  e.stopPropagation(); // 阻止事件冒泡，避免父下拉菜单关闭
  e.preventDefault();
});

3. 确保数据加载时机正确 #

虽然你确认能获取到游戏数据，但还是要保证games数组在下拉菜单渲染时已经被填充。可以给子菜单的<ul>添加ng-if来避免空菜单或undefined的问题：

<ul class="dropdown-menu" ng-if="games && games.length > 0">
  <li class="dropdown-item" ng-repeat="game in games" ng-click="getGames()">
    {{game.name}}
  </li>
</ul>

同时在控制器里初始化$scope.games = [];，避免数据未加载时出现报错。

4. 优化Bootstrap类的使用 #

把pull-right替换成Bootstrap推荐的dropdown-menu-right类，让下拉菜单右对齐更规范：

<ul class="dropdown-menu dropdown-menu-right">

另外清理代码里多余的空格（比如class="dropdown "末尾的空格），虽然不影响功能，但能让代码更整洁。

内容的提问来源于stack exchange，提问作者swetha