點擊角度bootstrap ui關閉下拉菜單

Question

我在導航欄上有下拉菜單，僅顯示移動設備。 單擊下拉菜單鏈接時，它只是移動到另一個路徑。 如您所知，此操作不會刷新整個頁面。 但即使我點擊下拉列表中的菜單，它也不會消失。

如果單擊菜單鏈接或路由更改，我想關閉下拉列表。 我如何在angularjs bootstrap中做到這一點？

Answer 1

如果您在單擊bootstrap下拉菜單的任何選項時更新路線，那么您可以只查看路線更改事件：

假設你有以下鏈接打開工具提示。

<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 個解決方案

解決方案1
2 已采納 2014-01-04 08:44:40

解決方案2
1 2015-02-05 18:34:43

解決方案3
0 2014-09-01 15:12:53

點擊角度bootstrap ui關閉下拉菜單

問題描述

3 個解決方案

解決方案1 2 已采納 2014-01-04 08:44:40

解決方案2 1 2015-02-05 18:34:43

解決方案3 0 2014-09-01 15:12:53

解決方案1
2 已采納 2014-01-04 08:44:40

解決方案2
1 2015-02-05 18:34:43

解決方案3
0 2014-09-01 15:12:53