javascript - 如何手动切换 angular-ui-select 下拉菜单

Question

我正在使用 AngularUI 的 ui-select 在页面上创建多个多选。我需要能够在用户单击页面上的按钮时打开下拉列表。

我已经尝试在元素上使用 jQuery 的 .click() 和 .toggle('click')，但是这些结果已经是 $apply在按钮的 ng-click 函数中调用时发生 in progress 错误。不过，当从 Chrome 的控制台调用时，它们会起作用。 ng-click 中的函数除了模拟另一次点击外什么都不做。

.focus() 除了聚焦输入之外什么都不做。

我也很不情愿地尝试了一个令人讨厌的 hack，我使用 select 的 ng-init 将它的 Controller 存储到按钮可以访问的范围，然后使用 Controller 的 toggle() 和 activate() 方法。这为输入提供了焦点，但相关的下拉列表不会打开。

如何从 ui-select 元素的上下文之外手动切换下拉列表？

Here's a Plunker you can play with.

Answer 1

我试过了，可以通过指令的方式实现。工作 fiddle

angular
  .module('myApp', [
    'ngSanitize',
    'ui.select'
  ])
  .controller('testController', function ($scope) {
    $scope.things = ['item1', 'item2'];
    $scope.clickOnInput = function() {
      //jQuery('#searchBarArea').click();
    };
  })
  .directive('openMenuByClick', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
               element.bind('click', function () {

                 $timeout(function () {
                     $("#"+attrs.openMenuByClick).find('input').click();
                });


            });
        }
    };
});

将此属性指令添加到您的按钮

<button id="btn" open-menu-by-click="searchBarArea">Click me</button>