如何在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; 
     } 
    }); 
});