Question

我正在使用angularstrap的bs-select来做一个下拉列表选择。我希望以编程方式使用JavaScript触发下拉列表按钮。这是吸虫：

Plunker Link

我想使用该按钮来触发下拉列表。我尝试了三种方法：

angular.element(document.querySelector("#test1")).triggerHandler('click');

它适用于ng-click的元素。但是在bs-select

document.getElementById("test1").click();

仍然不适用于triggerHandler('click')

angular.element(document.querySelector("#test1")).triggerHandler('click'); $scope.$apply()

我认为范围需要再次消化才会出现问题，但结果却并非如此。

在角带中，bs-select代码如下：

$select.$onMouseDown = function(evt) {
    // Prevent blur on mousedown on .dropdown-menu
    evt.preventDefault();
    evt.stopPropagation();
    // Emulate click for mobile devices
    if(isTouch) {
        var targetEl = angular.element(evt.target);
        targetEl.triggerHandler('click');
    }
};

当它停止时会触发点击此按钮。那我怎么办呢？

感谢您的回复。

Answer 1

我在使用AngularStrap时遇到过类似的问题。这些指令的配置选项名为trigger，可选值为manual。这是我们需要利用的配置选项，以实现我们想要的。

问题在于，没有任何关于此用法的文档。因为在你提到的评论中你可以使用AngularStrap Dropdowns，经过多方努力，我找到了一个解决方案来实现这一点。观察下拉列表的这种实现......

<button ng-model="expression" intellisense bs-dropdown="values" bs-show="drop">dropdown</button>

app.config(function($dropdownProvider) {
    angular.extend($dropdownProvider.defaults, {
        trigger: 'manual'
    });
});

您会在元素上注意到bs-show的属性。这是基于true或false值触发放置的绑定。让我们将其与另一个元素ng-click事件......

联系起来

<button ng-click="fireDropDown()">Manually Drop</button>

$scope.fireDropDown = function() {
    $scope.drop = $scope.drop ? false : true;
}

我尝试对bs-select做同样的事情，但（毫不奇怪）它不起作用。以下是一些可以帮助您的其他资源。

Plunker Example - 手动触发下拉列表

Display AngularStrap Dropdown Manually - How? - 我问的同时在问题上打了我的脑袋

feat(tips,pickers): add bsShow visibility attr (fixes #723) - 修复应该修复此问题。不确定为什么修复不跨越所有指令，包括bs-select。

Answer 2

我终于弄明白该怎么做了。这是吸虫：

plunker link

triggerHandler('mousedown')

应该是

Use MSBuild engine (recommended for this project type)

在角度带中，它使用onMouseDown作为事件处理程序，因此在触发器处理程序中我不应该使用triggerHandler（＆＃39; click＆＃39;）。相反，我应该使用triggerHandler（＆＃39; mousedown＆＃39;）来触发事件。它现在有效。

如何以编程方式触发角度带bs-select

2 个答案: