如何以编程方式触发 angular strap bs-select

Question

我正在使用 angularstrap 的 bs-select 做一个下拉列表 select。我想以编程方式使用 JavaScript 触发下拉列表按钮。这是 plunker:

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()

我认为这将是范围需要再次消化的问题，但事实证明并非如此。

而在angular strap 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) - 修复了应该修复的问题。不确定为什么 fix 没有跨越所有指令，包括 bs-select.

Answer 2

我终于弄清楚如何处理这个了。这是 plunker:

plunker link

triggerHandler('click')

应该是

triggerHandler('mousedown')

因为在 angular 表带中它使用 onMouseDown 作为事件处理程序，所以在触发器处理程序中我不应该使用 triggerHandler('click')。相反，我应该使用 triggerHandler('mousedown') 来触发事件。现在可以使用了。

如何以编程方式触发 angular strap bs-select

how to trigger angular strap bs-select programmatically

javascript

angularjs

angularjs-directive

angular-strap