AngularJS中多次复用含multiselect的组件问题

嘿，我来帮你把这个filtros组件改成可复用的版本！先把你现有的代码整理成规范的格式，再给你补上复用必备的配置细节：

格式化后的组件定义代码 #

angular.module('app')
  .component('filtros', {
    templateUrl: "./filtros.html",
    // 核心：添加绑定属性支持复用
    bindings: {
      selectedModel: '=',       // 双向绑定选中值
      dropdownData: '<',        // 单向传入下拉选项数据
      dropdownSettings: '<',    // 单向传入自定义配置（可选）
      onSelectionChange: '&'    // 选中变化时的回调输出
    },
    controller: ['$scope', '$http', '$translate', filtrosController]
  });

function filtrosController($scope, $http, $translate) {
  const vm = this;

  // 初始化下拉多选配置，优先使用外部传入的参数，无则用默认值
  $scope.multiselectConfig = {
    model: vm.selectedModel,
    data: vm.dropdownData,
    settings: vm.dropdownSettings || {
      checkBoxes: true,
      enableSearch: true,
      placeholder: $translate.instant('SELECT_OPTIONS')
    }
  };

  // 监听选中值变化，触发外部回调
  $scope.$watch('multiselectConfig.model', function(newSelected) {
    if (newSelected && vm.onSelectionChange) {
      vm.onSelectionChange({selected: newSelected});
    }
  }, true); // 深度监听数组/对象变化
}

对应的filtros.html模板 #

<div class="filter-dropdown">
  <angularjs-dropdown-multiselect
    options="multiselectConfig.data"
    selected-model="multiselectConfig.model"
    settings="multiselectConfig.settings">
  </angularjs-dropdown-multiselect>
</div>

组件复用示例 #

在父页面或组件中，你可以多次调用这个组件，传入不同的数据源和配置：

<!-- 复用场景1：选择用户 -->
<filtros
  selected-model="vm.selectedUsers"
  dropdown-data="vm.allUsers"
  dropdown-settings="vm.userDropdownSettings"
  on-selection-change="vm.handleUserSelect(selected)">
</filtros>

<!-- 复用场景2：选择部门 -->
<filtros
  selected-model="vm.selectedDepartments"
  dropdown-data="vm.allDepartments"
  dropdown-settings="vm.deptDropdownSettings"
  on-selection-change="vm.handleDeptSelect(selected)">
</filtros>

关键复用要点解析 #

• 双向绑定选中值：通过selectedModel: '='让父组件能实时获取和修改选中的选项，保证数据同步
• 自定义数据源：dropdownData: '<'支持传入不同的下拉选项数组，让组件适配不同的业务场景
• 灵活配置：dropdownSettings: '<'允许每个复用实例自定义下拉框的行为（比如是否显示搜索、占位符文本等），没有传入时会使用控制器里的默认配置
• 回调通知：onSelectionChange: '&'让父组件能监听选中变化，执行对应的业务逻辑

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