在角度引导 ui 中单击时关闭下拉菜单答案

【问题标题】：Close dropdown menu on click in angular bootstrap ui在角度引导 ui 中单击时关闭下拉菜单
【发布时间】：2014-01-22 00:10:06
【问题描述】：

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

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

【问题讨论】：

标签： javascript angularjs twitter-bootstrap drop-down-menu

【解决方案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');
         });
       } 
    }
  });

【讨论】：

谢谢。但它在第一次点击后隐藏了下拉菜单。
我明白了。通常，如果您单击任何菜单选项，它会自动关闭菜单 - 我想知道为什么它不是您的情况。我认为除了动态触发对 html 节点的点击之外，没有其他选项可以隐藏它，如更新的答案所示。
在我的情况下，路由是基于散列变化的。即使 url 的散列发生变化，下拉菜单会自动切换吗？我了解整页更改只会重置下拉菜单。
我应该把 Javascript 放在哪里？在控制器中？
@benshope：是的，在控制器中，对于此处所述的问题，但您最好使用更新后的答案中解释的指令。

【解决方案2】：

我发现这个解决方法对关闭菜单很有用。

$scope.$broadcast '$locationChangeSuccess'

【讨论】：

【解决方案3】：

我也刚遇到这个问题，~~看来我们可以使用dropdown-toggle指令了。~~

这不再有效，但与角度 v1.2.26 角度-ui-bootstrap 0.11.2 引导程序 v3.2.0 最初的问题似乎已解决，即使页面未刷新，下拉菜单也会关闭。

【讨论】：

似乎不起作用（angular 1.2.24，angular-bootstrap 0.11，Bootstrap 3）
@for3st 感谢您指出这一点，您是对的，它不再起作用了