聚焦时将作用域数组变量绑定至下拉菜单（MEAN栈应用场景）

嘿，针对你在MEAN栈应用里的这个自定义下拉指令需求，我整理了一个可行的解决方案，核心是给input添加焦点事件触发逻辑，把父作用域的数组绑定到指令的下拉列表中：

步骤1：修改指令模板，添加焦点监听 #

首先给模板里的input加上ng-focus指令，触发后续要写的焦点处理函数：

var template = '<input class="form-control" ng-model="ngModel" ng-disabled="disabled" ng-focus="loadDropdownList()">' + 
              '<div class="dropdown">' + 
                '<div class="form-control" ng-repeat="value in list | filter:ngModel">' + 
                  '<div ng-mousedown="select($event, value)">{{value}}</div>' + 
                '</div>' + 
              '</div>';

步骤2：完善指令的作用域与link函数 #

我们需要确保指令能正确访问父作用域的数组，同时实现loadDropdownList和select方法：

.directive('inputDropdown', function($compile) {
  return {
    restrict: 'E', // 可根据你的实际使用场景调整为'A'等类型
    scope: {
      ngModel: '=', // 双向绑定父作用域的ngModel
      disabled: '=',
      sourceArray: '<' // 单向接收父作用域的目标数组
    },
    template: '<input class="form-control" ng-model="ngModel" ng-disabled="disabled" ng-focus="loadDropdownList()">' + 
              '<div class="dropdown">' + 
                '<div class="form-control" ng-repeat="value in list | filter:ngModel">' + 
                  '<div ng-mousedown="select($event, value)">{{value}}</div>' + 
                '</div>' + 
              '</div>',
    link: function(scope, element, attrs) {
      // 初始化内部列表为空数组
      scope.list = [];

      // 焦点触发时加载父作用域的数组
      scope.loadDropdownList = function() {
        // 校验数组有效性后赋值，避免非数组类型导致的渲染问题
        if (scope.sourceArray && Array.isArray(scope.sourceArray)) {
          scope.list = angular.copy(scope.sourceArray);
        }
      };

      // 下拉项选中逻辑
      scope.select = function($event, value) {
        scope.ngModel = value;
        $event.stopPropagation(); // 阻止事件冒泡，避免意外触发其他逻辑
      };
    }
  };
})

步骤3：在表格中使用指令 #

在你的表格行里使用这个指令时，把父作用域的数组传给source-array属性即可：

<input-dropdown ng-model="row.selectedValue" disabled="row.isDisabled" source-array="yourParentScopeArray"></input-dropdown>

关键细节说明 #

• 作用域绑定：用sourceArray: '<'单向绑定父作用域数组，避免不必要的双向绑定开销，适合大数据量场景；
• 懒加载逻辑：ng-focus确保只有当input获得焦点时才加载数组，对于数百行的表格来说，能有效减少初始渲染的性能压力；
• 数组拷贝：使用angular.copy避免直接引用父数组导致的意外修改，保持指令内部数据的独立性。

如果你的需求是每次焦点都要获取最新的数组，这个逻辑完全适用；如果需要缓存数组，可以在loadDropdownList里加个判断，比如只有当list为空时才加载。

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