AngularJS下拉选项滚动懒加载实现咨询（MEAN栈自定义指令场景）

Got it, let's fix this lazy loading dropdown for your MEAN stack app—70k options loaded all at once is a surefire way to freeze the UI, so rolling out scroll-based lazy loading is the right move. Here's how to refine your inputDropdown directive to make this work smoothly:

Final Directive Code #

.directive('inputDropdown', function($parse, $timeout) {
  var template = `
    <input class="form-control" 
           ng-model="ngModel" 
           ng-disabled="disabled" 
           ng-focus="setDirectiveList()" 
           ng-blur="removeDirectiveList()">
    <div class="dropdown dropdown1" 
         ng-show="isListVisible"
         style="max-height: 300px; overflow-y: auto;"
         ng-scroll="onDropdownScroll()">
      <ul class="dropdown-menu">
        <li ng-repeat="item in options | limitTo: limit" 
            ng-click="selectItem(item)">
          {{item.label || item}}
        </li>
        <li ng-if="limit < options.length" style="text-align: center; padding: 5px;">
          Loading more...
        </li>
      </ul>
    </div>
  `;

  return {
    restrict: 'E',
    template: template,
    scope: {
      ngModel: '=',
      options: '=',
      disabled: '='
    },
    link: function(scope, element) {
      // Initialize lazy loading parameters
      scope.limit = 20;
      scope.isListVisible = false;

      // Show dropdown on focus
      scope.setDirectiveList = function() {
        scope.isListVisible = true;
        // Ensure DOM is rendered before checking scroll (use $timeout)
        $timeout(function() {
          const dropdownContainer = element.find('.dropdown1')[0];
          dropdownContainer.addEventListener('scroll', scope.onDropdownScroll);
        });
      };

      // Hide dropdown on blur
      scope.removeDirectiveList = function() {
        $timeout(function() {
          scope.isListVisible = false;
          const dropdownContainer = element.find('.dropdown1')[0];
          dropdownContainer.removeEventListener('scroll', scope.onDropdownScroll);
        }, 200); // Small delay to allow click events to fire first
      };

      // Scroll handler for lazy loading
      scope.onDropdownScroll = function() {
        const dropdownContainer = element.find('.dropdown1')[0];
        // Check if we've scrolled to the bottom
        const isAtBottom = dropdownContainer.scrollTop + dropdownContainer.clientHeight >= dropdownContainer.scrollHeight - 10;
        if (isAtBottom && scope.limit < scope.options.length) {
          // Increase limit by 20 (adjust this number based on your needs)
          scope.$apply(function() {
            scope.limit += 20;
          });
        }
      };

      // Handle item selection
      scope.selectItem = function(item) {
        scope.ngModel = item.value || item;
        scope.isListVisible = false;
      };
    }
  };
});

Key Improvements & Explanations #

• Fixed Height Dropdown: Added max-height: 300px; overflow-y: auto; to the dropdown container so it scrolls instead of expanding infinitely.
• Scroll Event Listener: We attach a scroll listener when the dropdown is shown, and remove it when hidden to avoid memory leaks.
• Bottom Detection: The onDropdownScroll function checks if the user has scrolled near the bottom (within 10px) and increases the limit to load more items.
• Blur Delay: A small $timeout on blur ensures the click event for selecting an item fires before hiding the dropdown.
• Loading State: Added a "Loading more..." indicator while there are still items left to load.

Additional Optimizations (Optional) #

• Debounce Scroll Events: If you notice performance issues with frequent scroll triggers, add a debounce function to onDropdownScroll to limit how often it runs.
• Search Filter: Add an input filter to let users narrow down options—this will make the lazy loading even more effective since users won't need to scroll through all 70k items.
• Virtual Scrolling: For even better performance with massive datasets, look into virtual scrolling (only rendering items that are visible in the viewport) instead of just limiting the number shown.

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