Wie Sie das Dropdown-Menü schließen, wenn wir außerhalb des Menüs in angularjs klicken

Question

Ich zeige ein Dropdown-Menü an, wenn ich auf ein Element klicke. Es versteckt sich, wenn ich erneut auf den Gegenstand klicke. Ich versuche das Dropdown-Menü zu verstecken, wenn ich irgendwo auf das Fenster klicke. Hier ist mein Code.

<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> 

Hier ist mein Controller:

$scope.showDropDown = function(){ 

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

Wie die Drop-down zu schließen, wenn ich irgendwo auf der Seite klicken?

Answer 1

Wenn Sie die Dropdown-Liste schließen möchten, wenn Sie außerhalb des Auswahlfelds klicken, können Sie eine andere benutzerdefinierte Direktive verwenden, die das Fenster nach Klickereignissen abhört. Dadurch wird ein neues Ereignis ausgestrahlt wird und Sie können hören:

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'); 
      }); 
     } 
    } 
}); 

Dies bedeutet, dass Sie die ursprüngliche Aktion ändern können, von einem Zuhörer dropdown:close Veranstaltung gehören:

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