如何手动切换 angular-ui-select 下拉菜单 [英] How to manually toggle angular-ui-select dropdown

问题描述

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

I'm using AngularUI's ui-select to create several multiselects on a page. I need to be able to open the dropdown list when a user clicks on a button on the page.

我已经尝试在元素上使用 jQuery 的 .click() 和 .toggle('click') ，但是这些结果已经产生了 $apply在按钮的 ng-click 函数中调用时发生正在进行中 错误.不过，它们在从 Chrome 的控制台调用时工作.ng-click 中的函数除了模拟另一次点击外没有任何作用.

I've tried using jQuery's .click() and .toggle('click') on the element, but these result in a $apply already in progress error when called by in the button's ng-click function. They work when called from Chrome's console though. The function in ng-click doesn't do anything besides simulating another click.

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

.focus() doesn't do anything, besides focusing the input.

我也很不情愿地尝试了一个讨厌的黑客，在那里我使用了选择的 ng-init 将它的控制器存储到按钮可以访问的范围，然后使用控制器的 toggle() 和 activate() 方法.这将焦点放在输入上，但关联的下拉列表不会打开.

I also reluctantly tried a nasty hack, where I used the select's ng-init to store it's controller to a scope the button has access to, and then using the controller's toggle() and activate() methods. This gave focus to the input, but the associated dropdown list wont open.

如何从 ui-select 元素的上下文之外手动切换下拉菜单?

How can I toggle the dropdown manually, from outside the ui-select element's context?

这是您可以玩的 Plunker.

推荐答案

我已经尝试过并且可以通过指令方法来实现.工作 小提琴

I have tried and could be achieved by directive method. working 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();
                });


            });
        }
    };
});

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

Add this attribute directive to your button

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

这篇关于如何手动切换 angular-ui-select 下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！