AngularJS中如何实现ng-dropdown-multiselect自动展开下拉

报错核心原因 #

$scope.selectedColumns.open() 报「open is not a function」是两个问题导致的：

• 给DOM标签配置的id="selectedColumns"不会自动将组件实例挂载到$scope对象上，$scope.selectedColumns本身就是undefined，自然不存在可调用的open方法
• 该组件默认不会把内置的控制方法直接暴露在当前作用域，需要手动配置参数接收组件暴露的控制实例

具体实现步骤 #

推荐方案：调用组件官方API #

1. 在控制器中提前定义空对象，用于接收组件暴露的API实例，记得提前在控制器依赖中注入$timeout：

$scope.ddDropdownApi = {};

2. 给组件标签新增events属性，绑定上一步定义的API对象，修改后的组件代码：

<div id="selectedColumns"
     ng-dropdown-multiselect="false"
     extra-settings="ddextraSettings"
     translation-texts="ddCustomTexts"
     options="ddOptions"
     selected-model="ddSelectedModel"
     checkboxes="true"
     events="ddDropdownApi">
</div>

3. 在完成下拉数据绑定、视图渲染完成后调用open方法即可，必须包裹$timeout保证调用时机在组件初始化、数据渲染完成之后，避免提前调用失效：

// 完成ddOptions、ddSelectedModel赋值逻辑后
$timeout(function() {
  $scope.ddDropdownApi.open();
});

兼容方案：模拟点击触发 #

如果使用的是旧版本组件，没有暴露events控制API，可以直接模拟用户点击下拉触发按钮的行为实现展开：

$timeout(function() {
  angular.element('#selectedColumns .multiselect-dropdown').trigger('click');
});

注意：不要在给选项数组赋值后立刻触发展开，必须等Angular digest循环执行完毕，否则会出现面板展开但选项列表为空的问题，$timeout即使配置0延迟，也能保证执行时机在视图渲染完成之后。

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