AngularJS实现点击Div外部或窗口区域隐藏元素的方案咨询

To achieve hiding your dropdown (controlled by showDropdown) when clicking outside its container or anywhere else in the window, we'll create a custom AngularJS directive and adjust your existing controller logic. Here's how to do it step-by-step:

Step 1: Update the Controller #

First, modify your controller to include a function that explicitly hides the dropdown, and add event propagation prevention to your toggle function to avoid immediate re-hiding when clicking the toggle button:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.showDropdown = false;

  // Toggle dropdown and stop event propagation
  $scope.helloClick = function($event){
    $event.stopPropagation(); // Prevent click from bubbling to document
    $scope.showDropdown = !$scope.showDropdown;
  };

  // Function to hide the dropdown
  $scope.hideDropdown = function() {
    $scope.showDropdown = false;
  };
});

Step 2: Create the clickOutside Directive #

This directive will listen for clicks on the entire document, check if the click occurred outside the target element, and trigger the hide function if so:

app.directive('clickOutside', ['$document', function($document) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      // Handle click events on the document
      function handleClickOutside(event) {
        // Check if the click target is NOT inside the directive's element
        if (!element[0].contains(event.target)) {
          // Trigger the provided expression (hideDropdown()) in Angular's digest cycle
          scope.$apply(function() {
            scope.$eval(attrs.clickOutside);
          });
        }
      }

      // Attach the document click listener
      $document.on('click', handleClickOutside);

      // Clean up the listener when the element is destroyed to prevent memory leaks
      scope.$on('$destroy', function() {
        $document.off('click', handleClickOutside);
      });
    }
  };
}]);

Step 3: Update the HTML #

Attach the click-outside directive to your dropdown element, passing the hideDropdown() function as the value. Make sure your toggle button uses the updated helloClick function with $event:

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="helloClick($event)">Toggle Dropdown</button>
  <!-- Add the click-outside directive to the dropdown container -->
  <div ng-show="showDropdown" click-outside="hideDropdown()">
    Dropdown content goes here! Click anywhere outside to close me.
  </div>
</div>

How It Works #

• Directive Logic: The clickOutside directive adds a global click listener. When a click happens, it checks if the target is inside the dropdown element using element[0].contains(). If not, it runs the hideDropdown() function.
• Event Propagation: The $event.stopPropagation() in helloClick ensures that clicking the toggle button doesn’t trigger the document click listener (which would immediately re-hide the dropdown after toggling it on).
• Memory Cleanup: The directive removes the document listener when the scope is destroyed to avoid memory leaks in single-page applications.

This approach is robust, reusable, and follows AngularJS best practices for handling DOM events.

内容的提问来源于stack exchange，提问作者ASHU