Question

我在导航栏上有下拉菜单，仅显示移动设备。单击下拉菜单链接时，它只是移动到另一个路径。如您所知，此操作不会刷新整个页面。但即使我点击下拉列表中的菜单，它也不会消失。

如果单击菜单链接或路径更改，我想关闭下拉列表。我如何在angularjs bootstrap中做到这一点？

Answer 1

如果您在点击引导程序下拉菜单的任何选项时更新路线，那么您可以只注意路线更改事件：

假设您有以下链接，这会打开工具提示。

<a class="dropdown-toggle">
  Click me for a dropdown, yo!
</a>

<ul class="dropdown-menu">
  <li ng-repeat="choice in items" class="ng-scope">
    <a class="ng-binding">The first choice!</a>
  </li><li ng-repeat="choice in items" class="ng-scope">
    <a class="ng-binding">And another choice for you.</a>
  </li><li ng-repeat="choice in items" class="ng-scope">
    <a class="ng-binding">but wait! A third!</a>
  </li>
</ul>

$scope.$on('$routeUpdate', function(scope, next, current) {
   $('html').trigger('click');
});

以上方法可行，但绝对不需要在每次路由更改时抓取html元素（因为它会导致重排），所以最好把它放在指令中，如下所示：

<html hide-dropdown>

angular.module('App', []).
  directive('hideDropdown', function() {
    return {
       restrict: 'A',
       link: function(scope, element) {
         scope.$on('$routeUpdate', function(scope, next, current) {
           element.trigger('click');
         });
       } 
    }
  });

Answer 2

我发现这种解决方法对于关闭菜单非常有用。

$scope.$broadcast '$locationChangeSuccess'

Answer 3

我也遇到过这个问题，~~似乎我们可以使用dropdown-toggle指令。~~

这不再有效，但有了角v1.2.26 angular-ui-bootstrap 0.11.2 Bootstrap v3.2.0 初始问题似乎已修复，即使页面未刷新，下拉菜单也会关闭。

点击角度bootstrap ui关闭下拉菜单

3 个答案: