如何在angularjs中單擊菜單外部時關閉下拉菜單

Question

我單擊某個項目時顯示下拉菜單。當我再次點擊該項目時，它正在隱藏。我試圖隱藏下拉菜單，如果我點擊窗口上的任何地方。 這是我的代碼。

<div ng-click="showDropDown()" class="dropdown">dropDown 
        <div id="myDropdown" class="dropdown-content"> 
         <label ng-click="sentToHome()">Home</label> 
         <label ng-click="sentToContacts()">Contacts</label> 
        </div> 
      </div> 

這裏是我的控制器：

$scope.showDropDown = function(){ 

     document.getElementById("myDropdown").classList.toggle("show"); 
    }; 

如何關閉下拉，如果我在頁面上任意位置單擊？

Answer 1

如果您希望在選擇框外單擊時關閉下拉菜單，則可以使用另一個自定義指令，該指令在窗口上監聽點擊事件。這將廣播，你可以聽新事件：

myApp.directive('dropdownListener', function ($window, $rootScope) { 
    return { 
     restrict: 'A', 

     link: function(scope, element, attr) { 
      var w = angular.element($window); 

      w.bind('click', function(){ 
      $rootScope.$broadcast('dropdown:close'); 
      }); 
     } 
    } 
}); 

這意味着你可以修改原來採取的行動包括監聽dropdown:close事件：

$scope.$on('dropdown:close', function (event, data) { 
    $scope.$apply(function() { 
     if($scope.open) { //only close when it is open 
     $scope.open = !$scope.open; 
     } 
    }); 
});